开发者社区> 尘光掠影> 正文

Bootstrap3 datetimepicker控件使用实例详解

简介: 原文网址:http://www.jb51.net/article/99896.htm Bootstrap3 日期+时间选择控件的使用方法,供大家参考,具体内容如下 1.
+关注继续查看
原文网址:http://www.jb51.net/article/99896.htm

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/

使用方法,引用的文件:


1
2
3
4
5
6
7
<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,简单配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>

1
2
3
4
5
6
7
8
9
10
$(function () { <br>
 $('#datetimepicker1').datetimepicker({
 format: 'YYYY-MM-DD',
 locale: moment.locale('zh-cn')
 });
 $('#datetimepicker2').datetimepicker({
 format: 'YYYY-MM-DD hh:mm',
 locale: moment.locale('zh-cn')
 });
});

实例2,选择时间段:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(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);
 });
});

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何使用云排查:开发者日志查询、联调问题排查工具&注意事项
说明:云排查是开发者接入支付宝的过程中,对接口自助化调试的工具。    开发者通过云排查,可以获取到与支付宝交互的日志,自己可以通过日志更直观的看到向支付宝上送的参数, 以便出现问题时可以对比文档排查是否参数设置出现问题,同时工具通过智能化分析该日志,对于异常订单进行智能化定位,对于成功的交易可以对其进行可能出现问题的提醒如(如单品,授权,返佣参数为空可能   出现的问题) 并给出相应的解决方案。
858 0
使用FREDATED引擎实现跨实例访问
    跨数据库服务器,跨实例访问是比较常见的一种访问方式,在Oracle中可以通过DB LINK的方式来实现。对于MySQL而言,有一个FEDERATED存储引擎与之相对应。
724 0
使用FFmpeg新解码API解封装解码音视频(代码实例)
在ffmpeg的源代码中,有新旧版本的编解码接口调用示例,但是demux、mux然后decode、encode的联动起来的接口调用实例并没有,在使用旧版本的编解码接口在编译时会报接口弃用告警信息,所以最好尽快把原有的调用方式切换到新的编解码接口调用方式,告警信息如下: ...
2031 0
Bootstrap实例(实习第3天)
&lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name="viewport" content="width=device
992 0
js正则函数match、exec、test、search、replace、split使用介绍集合
match 方法 使用正则表达式模式对字符串执行查找,并将包含查找的结果作为数组返回。 stringObj.match(rgExp) 参数 stringObj 必选项。对其进行查找的 String 对象或字符串文字。
598 0
使用svnkit 的相关实例及相关问题汇总
SVNKIT操作SVN版本库的完整例子 http://www.cnblogs.com/wangjiyuan/p/svnkitwanchenglizi.html#!comments    2.
2409 0
+关注
97
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载