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


Posted in Javascript onFebruary 23, 2017

本文实例为大家分享了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/

使用场景

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

使用方法

两个时间输入域如图:

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'
});

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

Javascript 相关文章推荐
三级下拉菜单的js实现代码
May 23 Javascript
Javascript面向对象编程
Mar 18 Javascript
xml转json的js代码
Aug 28 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 #Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 #Javascript
高效的jQuery代码编写技巧总结
Feb 22 #Javascript
JS拉起或下载app的实现代码
Feb 22 #Javascript
js实现带简单弹性运动的导航条
Feb 22 #Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 #Javascript
javascript 网页进度条简单实例
Feb 22 #Javascript
You might like
php xfocus防注入资料
2008/04/27 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
Yii中表单用法实例详解
2016/01/05 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
7个Javascript地图脚本整理
2009/10/20 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
Python 登录网站详解及实例
2017/04/11 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
python 如何在测试中使用 Mock
2021/03/01 Python
中式面点餐厅创业计划书
2014/01/29 职场文书
旷课检讨书1000字
2014/02/14 职场文书
大学生就业策划书范文
2014/04/04 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
JAVA springCloud项目搭建流程
2022/05/11 Java/Android