bootstrap datetimepicker 日期插件超详细使用方法
来源:互联网 发布:持有 体验 茅台 知乎 编辑:程序博客网 时间:2024/05/17 04:59
本文实例为大家分享了bootstrap datetimepicker日期插件的简单使用,供大家参考,具体内容如下
首先在文件头部引入必要的文件:
<link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css"><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'});
阅读全文
0 0
- bootstrap datetimepicker 日期插件超详细使用方法
- bootstrap datetimepicker 日期插件超详细使用方法
- bootstrap datetimepicker日期插件超详细使用方法介绍
- bootstrap之datetimepicker(日期时间选择器)插件详细使用方法
- bootstrap-datetimepicker日期插件使用
- 基于bootstrap的日期插件bootstrap-datetimepicker
- Bootstrap日期组件datetimepicker的使用方法
- bootstrap日期插件datetimepicker的简单使用
- bootstrap-datetimepicker日期插件的使用
- bootstrap datetimepicker日期时间插件的使用
- bootstrap-datetimepicker日期时间选择器的使用方法注意
- bootstrap datetimepicker使用方法
- Bootstrap日期控件-datetimepicker
- bootstrap-datetimepicker 选择日期
- bootstrap-datetimepicker 日期控件
- bootstrap-datetimepicker.min.js日期插件使用记录
- bootstrap中datetimepicker日期插件的时间比较
- bootstrap3中使用bootstrap-datetimepicker日期插件的用法
- java的几种对象解释
- Parse error: syntax error, unexpected end of file
- OC 内存管理
- 椭圆曲线加密学习的菜鸟入门
- CSS基础(三) 个人笔记
- bootstrap datetimepicker 日期插件超详细使用方法
- Win10系统安装TensorFlow简易教程
- 传智播客-Java学习笔记day15
- POJ 1068 Parencodings <模拟>
- datastage监控平台
- 《谷歌宣布Chrome不再信任所有赛门铁克SSL证书》误读新闻的澄清说明
- Android游戏开发之小球重力感应实现
- FFMPEG中最关键的结构体之间的关系
- Border 样式 汇总