脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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实现小星星特效

    JS实现小星星特效

    这篇文章主要为大家详细介绍了JS实现小星星特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12
  • JavaScript使用表单元素验证表单的示例代码

    JavaScript使用表单元素验证表单的示例代码

    这篇文章主要介绍了JavaScript使用表单元素验证表单的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 图片文字识别（OCR）插件Ocrad.js教程

    图片文字识别（OCR）插件Ocrad.js教程

    这篇文章主要为大家详细介绍了图片文字识别（OCR）插件Ocrad.js教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JS实现可调整倒计时间代码分享

    JS实现可调整倒计时间代码分享

    这篇文章主要介绍了JS实现可调整倒计时间代码，效果很酷炫，也很具有实用价值，感兴趣的小伙伴们可以参考一下
    2015-08-08
  • 关于Ajax的原理以及代码封装详解

    关于Ajax的原理以及代码封装详解

    AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），相信大家对ajax都很熟悉，下面这篇文章主要给大家介绍了关于Ajax原理以及代码封装的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-09-09
  • js禁止页面使用右键(简单示例代码)

    js禁止页面使用右键(简单示例代码)

    js禁止页面使用右键(简单示例代码)。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • 如何用JavaScript检测当前浏览器是无头浏览器

    如何用JavaScript检测当前浏览器是无头浏览器

    这篇文章主要介绍了如何用JavaScript检测当前浏览器是无头浏览器，对无头浏览器感兴趣的同学，可以参考一下
    2021-04-04
  • 深入浅析JavaScript系列（13）：This? Yes,this!

    深入浅析JavaScript系列（13）：This? Yes,this!

    在这篇文章里，我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明，这个主题很难，在不同执行上下文中this的确定经常会发生问题
    2016-01-01
  • Javascript中replace()小结

    Javascript中replace()小结

    在javascript中，replace方法是属于String对象的，可用于替换字符串。今天我们就来详细探讨下一些replace()方法的使用
    2015-09-09
  • 浅析JavaScript中的特殊数据类型

    浅析JavaScript中的特殊数据类型

    在JavaScript中，有6大数据类型，分别包括string,number,boolean,undefined,null 和 object。下面通过通过本文给大家介绍JavaScript中的特殊数据类型，需要的朋友参考下吧
    2017-12-12

最新评论