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 相关文章推荐
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
js图片自动切换效果处理代码
May 07 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 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
Search Engine Friendly的URL设计
2006/10/09 PHP
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
解放web程序员的输入验证
2006/10/06 Javascript
Prototype使用指南之hash.js
2007/01/10 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
基于jQuery的自动完成插件
2011/02/03 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
js判断节假日实例代码
2017/12/27 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
Python获取服务器信息的最简单实现方法
2015/03/05 Python
python实现合并两个数组的方法
2015/05/16 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
Flask数据库迁移简单介绍
2017/10/24 Python
Python对切片命名的实现方法
2018/10/16 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
如何清空Session
2015/02/23 面试题
环保志愿者活动方案
2014/08/14 职场文书
合伙购房协议样本
2014/10/06 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
mysql 获取时间方式
2022/03/20 MySQL