Bootstrap3 datetimepicker控件使用实例


Posted in Javascript onDecember 13, 2016

Bootstrap3 日期+时间选择控件的使用方法,供大家参考,具体内容如下

1.支持日期选择,格式设定
2.支持时间选择
3.支持时间段选择控制
4.支持中文

官网地址:http://eonasdan.github.io/bootstrap-datetimepicker/
git地址:https://github.com/Eonasdan/bootstrap-datetimepicker
moment语言包:https://github.com/moment/moment
datetimepicker使用配置说明:http://eonasdan.github.io/bootstrap-datetimepicker/Options/
moment时间格式化使用说明:http://momentjs.com/docs/

使用方法,引用的文件:

<script src="../Js/jquery-1.11.3.min.js"></script> 
<link href="../Js/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" /> 
<script src="../Js/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> 
 
<link href="../Js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> 
<script src="../Js/bootstrap-datetimepicker/js/moment-with-locales.min.js"></script> 
<script src="../Js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

实例1,简单配置:

<div class="row"> 
 <div class='col-sm-6'> 
 <div class="form-group"> 
  <label>选择日期:</label> 
  <!--指定 date标记--> 
  <div class='input-group date' id='datetimepicker1'> 
  <input type='text' class="form-control" /> 
  <span class="input-group-addon"> 
   <span class="glyphicon glyphicon-calendar"></span> 
  </span> 
  </div> 
 </div> 
 </div> 
 <div class='col-sm-6'> 
 <div class="form-group"> 
  <label>选择日期+时间:</label> 
  <!--指定 date标记--> 
  <div class='input-group date' id='datetimepicker2'> 
  <input type='text' class="form-control" /> 
  <span class="input-group-addon"> 
   <span class="glyphicon glyphicon-calendar"></span> 
  </span> 
  </div> 
 </div> 
 </div> 
</div>
$(function () { 

 $('#datetimepicker1').datetimepicker({ 
 format: 'YYYY-MM-DD', 
 locale: moment.locale('zh-cn') 
 }); 
 $('#datetimepicker2').datetimepicker({ 
 format: 'YYYY-MM-DD hh:mm', 
 locale: moment.locale('zh-cn') 
 }); 
});

Bootstrap3 datetimepicker控件使用实例

实例2,选择时间段:

<div class="row"> 
 <div class='col-sm-6'> 
 <div class="form-group"> 
  <label>选择开始时间:</label> 
  <!--指定 date标记--> 
  <div class='input-group date' id='datetimepicker1'> 
  <input type='text' class="form-control" /> 
  <span class="input-group-addon"> 
   <span class="glyphicon glyphicon-calendar"></span> 
  </span> 
  </div> 
 </div> 
 </div> 
 <div class='col-sm-6'> 
 <div class="form-group"> 
  <label>选择结束时间:</label> 
  <!--指定 date标记--> 
  <div class='input-group date' id='datetimepicker2'> 
  <input type='text' class="form-control" /> 
  <span class="input-group-addon"> 
   <span class="glyphicon glyphicon-calendar"></span> 
  </span> 
  </div> 
 </div> 
 </div> 
</div>
$(function () { 
 var picker1 = $('#datetimepicker1').datetimepicker({ 
 format: 'YYYY-MM-DD', 
 locale: moment.locale('zh-cn'), 
 //minDate: '2016-7-1' 
 }); 
 var picker2 = $('#datetimepicker2').datetimepicker({ 
 format: 'YYYY-MM-DD', 
 locale: moment.locale('zh-cn') 
 }); 
 //动态设置最小值 
 picker1.on('dp.change', function (e) { 
 picker2.data('DateTimePicker').minDate(e.date); 
 }); 
 //动态设置最大值 
 picker2.on('dp.change', function (e) { 
 picker1.data('DateTimePicker').maxDate(e.date); 
 }); 
});

Bootstrap3 datetimepicker控件使用实例

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

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

Javascript 相关文章推荐
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
js 实现验证码输入框示例详解
Sep 23 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 #Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 #Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 #Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 #Javascript
jQuery内存泄露解决办法
Dec 13 #Javascript
Angular 常用指令实例总结整理
Dec 13 #Javascript
jQuery UI制作选项卡(tabs)
Dec 13 #Javascript
You might like
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
用PHP生成静态HTML速度快类库
2007/03/18 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
Python pickle模块用法实例分析
2015/05/27 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
python样条插值的实现代码
2018/12/17 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
普天C++笔试题
2016/03/20 面试题
计算机网络专业推荐信
2013/11/24 职场文书
监理资料员岗位职责
2014/01/03 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
中学生获奖感言
2014/02/04 职场文书
《称象》教学反思
2014/04/25 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
学校运动会通讯稿
2015/07/18 职场文书
运动会100米加油稿
2015/07/21 职场文书