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 浮动层菜单收藏
Jan 16 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
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
mysql+php分页类(已测)
2008/03/31 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
python实现简单http服务器功能
2018/09/17 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
纪检监察建议书
2014/05/19 职场文书
现役军人家属慰问信
2015/03/24 职场文书
庆七一主持词
2015/06/29 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android