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

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

您可能感兴趣的文章:

相关文章

  • JavaScript实现三级联动菜单实例代码

    JavaScript实现三级联动菜单实例代码

    这篇文章主要为大家详细介绍了JavaScript实现三级联动菜单实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 关于JavaScript语句后面的分号问题

    关于JavaScript语句后面的分号问题

    下面通过本文给大家详细介绍javascript中的语句后面的分号问题，本文给大家介绍的非常详细，需要的朋友参考下吧
    2017-12-12
  • 浅谈webpack 构建性能优化策略小结

    浅谈webpack 构建性能优化策略小结

    webpack以其丰富的功能和灵活的配置而深受业内吹捧，逐步取代了grunt和gulp成为大多数前端工程实践中的首选，这篇文章主要介绍了浅谈webpack 构建性能优化策略小结，感兴趣的小伙伴们可以参考一下
    2018-06-06
  • js自动闭合html标签(自动补全html标记)

    js自动闭合html标签(自动补全html标记)

    假如我有一个DIV，如果没有闭合后面的样式都会乱了，这样的代码可能会影响后面的样式，我希望用ＪＳ去自动闭合这种没有闭合的标签
    2012-10-10
  • javascript tips提示框组件实现代码

    javascript tips提示框组件实现代码

    一个简单的类似title的提示效果，但现实内容可以很丰富，以上js另存为tip.js，下面是使用的demo。
    2010-11-11
  • setInterval计时器不准的问题解决方法

    setInterval计时器不准的问题解决方法

    在js中如果打算使用setInterval进行倒数,计时等功能，往往是不准确的，针对这个问题，本文有个不错的解决方案
    2014-05-05
  • 浅析JavaScript中的call、apply和bind方法

    浅析JavaScript中的call、apply和bind方法

    JavaScript中的call、apply和bind方法是用于改变函数执行上下文和预先设置参数的强大工具，它们在编写可维护和优雅的代码时起到了重要的作用，本文将介绍这些方法的原理和使用场景，并展示如何将它们应用于你的代码中，使其更加漂亮
    2023-06-06
  • html5+CSS 实现禁止IOS长按复制粘贴功能

    html5+CSS 实现禁止IOS长按复制粘贴功能

    因为在移动端APP需要实现长按执行别的事件，但是在iOS系统有默认的长按选择复制粘贴。禁止在网上找了很多资料，下面小编给大家分享解决方案，一起看看吧
    2016-12-12
  • js实现瀑布流的三种方式比较

    js实现瀑布流的三种方式比较

    瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局，这篇文章主要介绍了js实现瀑布流的三种方式，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • JS删除对象中某一属性案例详解

    JS删除对象中某一属性案例详解

    这篇文章主要介绍了JS删除对象中某一属性案例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09

最新评论