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 相关文章推荐
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
javascript之Partial Application学习
Jan 10 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
js实现录音上传功能
Nov 22 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
Vue实现随机验证码功能
Dec 29 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
需要发散思维学习PHP
2009/06/29 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
python字符串替换的2种方法
2014/11/30 Python
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
python实现批量注册网站用户的示例
2019/02/22 Python
python批量图片处理简单示例
2019/08/06 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
大学应届生求职简历的自我评价
2013/10/08 职场文书
天鹅的故事教学反思
2014/02/04 职场文书
诚信考试标语
2014/06/24 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
本溪关门山导游词
2015/02/09 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis