bootstrap datetimepicker日期插件超详细使用方法介绍

 更新时间:2017年02月23日 08:20:07   作者:纯黑Se丶  
本篇文章主要介绍了bootstrap datetimepicker日期插件超详细使用方法介绍,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文实例为大家分享了bootstrap datetimepicker日期插件的简单使用,供大家参考,具体内容如下

首先在文件头部引入必要的文件:

<link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css" rel="external nofollow" >
<script src="Js/bootstrap-datetimepicker.js"></script>

想用中文显示,加入bootstrap-datetimepicker.zh-CN.js文件

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

然后调用初始化日期插件方法:

$('.date').datetimepicker({
 language: 'zh-CN',//显示中文
 format: 'yyyy-mm-dd',//显示格式
 minView: "month",//设置只显示到月份
 initialDate: new Date(),//初始化当前日期
 autoclose: true,//选中自动关闭
 todayBtn: true//显示今日按钮
 })

引入控件

使用bootstrap的日期控件需要单独引入bootstrap-datetimepicker.min.css和bootstrap-datetimepicker.min.js

详情及文件可以通过下面地址下载:http://www.bootcss.com/p/bootstrap-datetimepicker/

使用场景

单独引入一个日期控件可以参考上面提供的连接地址上的案例。此处介绍的是怎么使用两个日期控件,一个为开始日期,另外一个为结束日期,两个日期之间建立相互约束关系。即开始日期不能大于结束日期,结束日期不能小于开始日期。

使用方法

两个时间输入域如图:

html代码

<input size="16" type="text" id="datetimeStart" readonly class="form_datetime">
--
<input size="16" type="text" id="datetimeEnd" readonly class="form_datetime">

 js代码如下

<script type="text/javascript">
  $("#datetimeStart").datetimepicker({
    format: 'yyyy-mm-dd',
    minView:'month',
    language: 'zh-CN',
    autoclose:true,
    startDate:new Date()
  }).on("click",function(){
    $("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val())
  });
  $("#datetimeEnd").datetimepicker({
    format: 'yyyy-mm-dd',
    minView:'month',
    language: 'zh-CN',
    autoclose:true,
    startDate:new Date()
  }).on("click",function(){
    $("#datetimeEnd").datetimepicker("setStartDate",$("#datetimeStart".val()))
  });
</script>

 关于bootstrap插件datepicker,只选择年月;

<input type="text"class="form-control form_datetime_2"readonly id="month_time"value=""/>
$(".form_datetime_2").
datetimepicker({
language: 'zh-CN',
format: 'yyyy-mm',
autoclose: true,
todayBtn: true,
startView: 'year',
minView:'year',
maxView:'decade'
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 详解ES6 中的迭代器和生成器

    详解ES6 中的迭代器和生成器

    迭代器是一个统一的接口,它的作用是使各种数据结构可以被便捷的访问,它是通过一个键为Symbol.iterator的方法来实现,这篇文章主要介绍了ES6 中的迭代器和生成器,需要的朋友可以参考下
    2022-08-08
  • JavaScript实现购物车基本功能

    JavaScript实现购物车基本功能

    这篇文章主要为大家详细介绍了JavaScript实现购物车的基本功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • JavaScript对象扩展方法的用法详解

    JavaScript对象扩展方法的用法详解

    JavaScript对象中的可扩展性指的是:是否可以给对象添加新属性。所有的内置对象和自定义对象显示的都是可扩展的,对于宿主对象,则由JavaScript引擎决定
    2022-11-11
  • JS组件系列之Bootstrap Icon图标选择组件

    JS组件系列之Bootstrap Icon图标选择组件

    这篇文章给大家介绍js组件系列之Bootstrap Icon图标选择组件,对bootstrap icon图标相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • 在uni-app中踩过的坑及解决

    在uni-app中踩过的坑及解决

    这篇文章主要介绍了在uni-app中踩过的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • JS基于对象的链表实现与使用方法示例

    JS基于对象的链表实现与使用方法示例

    这篇文章主要介绍了JS基于对象的链表实现与使用方法,结合实例形式分析了链表的原理及javascript定义与使用链表的相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • js浏览器滚动条卷去的高度scrolltop(实例讲解)

    js浏览器滚动条卷去的高度scrolltop(实例讲解)

    下面小编就为大家带来一篇js浏览器滚动条卷去的高度scrolltop(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • js调用activeX获取u盘序列号的代码

    js调用activeX获取u盘序列号的代码

    js调用activeX获取u盘序列号的代码,需要的朋友可以参考下。
    2011-11-11
  • 给ListBox添加双击事件示例代码

    给ListBox添加双击事件示例代码

    如何给ListBox添加双击事件,想必有很多的新手朋友们都不会吧,下面有个不错的示例,感兴趣的朋友可以参考下
    2013-12-12
  • Javascript 读后台cookie代码

    Javascript 读后台cookie代码

    由于asp的cookie是经过url编码的,所以读之前要unescape一下。
    2008-09-09

最新评论