脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap日期控制

Bootstrap每天必学之日期控制

 更新时间：2016年03月07日 15:14:43   投稿：lijiao  
Bootstrap每天必学之日期控制，对Bootstrap日期控制感兴趣的小伙伴们可以参考一下

一个成熟的框架，日期控制是少不了的，在网上也有很多日期控制可以选择，而主框架用了bootstrap，日期控制也当前要用它自己的，

控件地址：http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

GitHub上开源地址：https://github.com/smalot/bootstrap-datetimepicker

在使用datetimepicker之前，先要经过以下几个步骤

1、引用JS脚本库

<script src="/Content/bootstraps/js/bootstrap.js"></script>
<script src="/Content/bootstraps/js/bootstrap-datetimepicker.js"></script>
<script src="/Content/bootstraps/js/bootstrap-datetimepicker.zh-CN.js"></script>

其中bootstrap-datetimepicker.zh-CN.js表示可以使用中文的语言显示日期时间

2、引入CSS类库

<link href="/Content/bootstraps/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstraps/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

3、定义HTML标签

<input class="form_datetime form-control" type="text" value="2016-03-07" size="16">

4、编写datetimepicker事件

<script type="text/javascript">
 $(".form_datetime").datetimepicker({
 format: "yyyy-mm-dd",
 autoclose: true,
 todayBtn: true,
 todayHighlight: true,
 showMeridian: true,
 pickerPosition: "bottom-left",
 language: 'zh-CN',//中文，需要引用zh-CN.js包
 startView: 2,//月视图
 minView: 2//日期时间选择器所能够提供的最精确的时间选择视图
 }); 
</script>

注意，有很多朋友都在网上问过，如何只用日期，或者不用时间，因为默认情况下，每次使用datetimepicker选择时，都要选到日间那个级别上，很是不爽，大叔在研究中发展，使用minView这个参数解决了这个问题，它相当于在控制上，最小的显示精度，

０表示分钟（默认），１表示小时，而２表示天，我们把值设为２就不会再出现选择小时的页面了！

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助。

您可能感兴趣的文章:

相关文章

  • JS前端导出Excel的方法详解

    JS前端导出Excel的方法详解

    最近写管理端的需求，发现有一个excel导出的需求，所以正好本文就来和大家分享一下导出excel文件的三种实现方式，感兴趣的小伙伴可以了解一下
    2023-07-07
  • js replace替换字符串同时替换多个方法

    js replace替换字符串同时替换多个方法

    这篇文章主要介绍了js replace替换字符串同时替换多个方法 的相关资料,需要的朋友可以参考下
    2018-11-11
  • javascript事件冒泡和事件捕获详解

    javascript事件冒泡和事件捕获详解

    最近在学习javascript中遇到了一些困难，比如冒泡和捕获，很多次被提到，但又不知究竟应用在何处。找到了一些好文章解惑，在这里分享给大家。
    2015-05-05
  • 深入理解在JS中通过四种设置事件处理程序的方法

    深入理解在JS中通过四种设置事件处理程序的方法

    所有的JavaScript事件处理程序的作用域是在其定义时的作用域而非调用时的作用域中执行,并且它们能存取那个作用域中的任何一个本地变量。但是HTML标签属性注册处理程序就是一个例外。看下面四种方式
    2017-03-03
  • JS实现数据动态渲染的竖向步骤条

    JS实现数据动态渲染的竖向步骤条

    这篇文章主要为大家详细介绍了JS实现数据动态渲染的竖向步骤条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 详解使用JWT实现单点登录（完全跨域方案）

    详解使用JWT实现单点登录（完全跨域方案）

    这篇文章主要介绍了详解使用JWT实现单点登录（完全跨域方案），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • JavaScript创建表格的方法

    JavaScript创建表格的方法

    这篇文章主要为大家详细介绍了JavaScript创建表格的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-04-04
  • 操作按钮悬浮固定在微信小程序底部的实现代码

    操作按钮悬浮固定在微信小程序底部的实现代码

    在一些购物平台经常需要将商品加入购物车，像加入购物车按钮、结算按钮、收货列表添加地址按钮都是按钮悬浮底部的，怎么实现这样的功能呢？下面小编给大家带来了操作按钮悬浮固定在微信小程序底部的实现代码，一起看看吧
    2019-08-08
  • 从javascript语言本身谈项目实战

    从javascript语言本身谈项目实战

    从javascript语言本身谈项目实战...
    2006-12-12
  • 浅谈javascript中基本包装类型

    浅谈javascript中基本包装类型

    在JavaScript中，和JAVA类似，也提供了对于基本数据类型的包装类型。例如Number、Boolean、String类型。下面我们就来详细探讨下吧。
    2015-06-06

最新评论