bootstrap-datetimepicker时间控件

本文转载自查看原文 2018-05-01 15:33 2349 bootstrap

本人Python全栈开发，某日遇到做时间控件的需求，于是无休止的召唤了度娘，发现看不太懂。算是为自己做个笔记，也为大家分享一下bootstrap datetimepicker日期插件的简单使用，供大家参考，具体内容如下

准备工作：

我们可以将这款日期控件下载下来。百度bootstrap-datetimepicker时间控件即可（大部分需要花钱）。

　页面里需要的文件有：

　　bootstrap.min.css（含有bootstrap 所有css）
　　bootstrap-datetimepicker.min.css（重要，这就是日期控件所需的样式表）
　　jquery-1.8.3.min.js（其他版本的jquery也可以）
　　bootstrap.min.js（含有bootstrap 所有js）
　　bootstrap-datetimepicker.js（重要，这就是日期控件所需的js）
　　locales/bootstrap-datetimepicker.fr.js（重要，这里是日期控件初始值）

我直接用的是网络文件，点击下载插件：http://www.bootcdn.cn/bootstrap-datetimepicker/

因为2.4.4版本的插件多，而且有中文显示，所以我选择了2.4.4版

首先在文件头部引入必要的文件：

    <link href="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.js"></script>
    <script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.fr.js"></script>

想用中文显示，加入bootstrap-datetimepicker.zh-CN.js文件

 
    <script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script> 
  

然后调用初始化日期插件方法：

 
   //时间控件初始化
    function initDatepickle() {
       $('#datetimepicker2').datetimepicker({                                                                                   
        minView: "month",//设置只显示到月份                                               
        format: 'yyyy-mm-dd',//显示格式                                                        
{#        autoclose: true,//选完自动关闭#}                                                                        
        todayBtn: true,
        language:"zh-CN",
         startDate: new Date(),  //以前的日期不能点                                                                             
        bootcssVer:3  //小箭头
        }).on('changeDate', changeDate);                                                               
    } 
  

让我们看一下插件的效果：

html页面是这样滴~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    
　　<link rel="stylesheet" href="/static/css/index.css">
    
     <script src="/static/js/jquery-3.2.1.min.js"></script>　/*基于jquery*/
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">/*（含有bootstrap 所有css)*/
　　<link rel="stylesheet" href="/static/bootstrap/js/bootstrap.min.js">　/*（含有bootstrap 所有js)*/
    <link href="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.css" rel="stylesheet">　/*（重要，这就是日期控件所需的js）*/
    <script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.js"></script>
    <script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.fr.js"></script>　/*（重要，弹出日历里面 显示的文字bootstrap里面显示的是英文 ，触发后显示的年月日等的显示文字，即为：Jan，feb等等）*/
    <script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>/* 中文显示*/
</head>

<body>
<div>这里就写上自己需要的代码，比如你想要的是一个简单的输入框时间控件就写输入框的代码，具体如下几种样式介绍</div>　


<script type="text/javascript">这里写自己的js，调用时间选择器，也就是激活日期选择器，即为下文的js</script>
</body>
</html>

文件引用完了，咱们就开始设置日期控件了。

这里根据不同需求，也有不同的样式写法

1、简单的输入框

代码：

<input type="text" value="2014-09-23 23:05" id="datetimepicker">

js：

$('#datetimepicker').datetimepicker({
format: 'yyyy-mm-dd hh:ii'      /*此属性是显示顺序，还有显示顺序是mm-dd-yyyy*/
});

也有这么写的

代码：

<input type="text" value="2012-05-15 21:05" id="datetimepicker" data-date-format="yyyy-mm-dd hh:ii">

js：

$('#datetimepicker').datetimepicker();

2、作为组件使用的时候

代码是这样的

<div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
       <input size="16" type="text" value="12-02-2012" readonly>
       <span class="add-on"><i class="icon-th"></i></span>
</div>

js：

$('#datetimepicker').datetimepicker();

3、作为内联日期时间选择器：

代码是这样的：

<div id="datetimepicker"></div>

js：

$('#datetimepicker').datetimepicker()

以上的介绍中，js部分是一定要写在页面里的，注意要写在页面最后面。（js依赖于jquery和bootstrap等文件）

看到上文出现的蓝色文字了没？没看到？！好吧，再写一遍

$('#datetimepicker').datetimepicker({
   format: 'yyyy-mm-dd hh:ii'      /*此属性是显示顺序，还有显示顺序是mm-dd-yyyy*/
});

看见了吧~里面的format是什么东东呢？这就是日期选择器的参数。有什么用呢？这是用来设置日期选择器的一些属性的。比如我想设置自己想要的时间控件。我希望点击选择的时候先显示月份而不是年份，我想要时间的顺序是dd-mm-yyyy，这个时候就需要参数来设置了。下面就来具体看看一些参数设置吧。

format

这个是必须要设置的。

String. 默认值: 'mm/dd/yyyy'

日期格式， p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合。

weekStart

Integer. 默认值：0

一周从哪一天开始。0（星期日）到6（星期六）

startDate

Date. 默认值：开始时间

The earliest date that may be selected; all earlier dates will be disabled.

endDate

Date. 默认值：结束时间

The latest date that may be selected; all later dates will be disabled.

daysOfWeekDisabled 一周禁用的日期

String, Array. 默认值: '', []

Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. Example: disable weekends: '0,6' or [0,6].

autoclose

Boolean. 默认值：false

当选择一个日期之后是否立即关闭此日期时间选择器。

startView

Number, String. 默认值：2, 'month'

日期时间选择器打开之后首先显示的视图。可接受的值：

0 or 'hour' for the hour view
1 or 'day' for the day view
2 or 'month' for month view (the default)
3 or 'year' for the 12-month overview
4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.

minView

Number, String. 默认值：0, 'hour'

日期时间选择器所能够提供的最精确的时间选择视图。

maxView

Number, String. 默认值：4, 'decade'

日期时间选择器最高能展示的选择范围视图。

todayBtn

Boolean, "linked". 默认值: false

如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。

todayHighlight

Boolean. 默认值: false

如果为true, 高亮当前日期。

keyboardNavigation

Boolean. 默认值: true

是否允许通过方向键改变日期。

language

String. 默认值: 'en'

The two-letter code of the language to use for month and day names. These will also be used as the input's value (and subsequently sent to the server in the case of form submissions). Currently ships with English ('en'), German ('de'), Brazilian ('br'), and Spanish ('es') translations, but others can be added (see I18N below). If an unknown language code is given, English will be used.

forceParse

Boolean. 默认值: true

当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中。

minuteStep

Number. 默认值: 5

此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间（分钟）用于选择。

pickerReferer : 不建议使用

String. 默认值: 'default' (other value available : 'input')

The referer element to place the picker for the component implementation. If you want to place the picker just under the input field, just specify input.

pickerPosition

String. 默认值: 'bottom-right' (还支持 : 'bottom-left')

此选项当前只在组件实现中提供支持。通过设置选项可以讲选择器放倒输入框下方。

viewSelect

Number or String. 默认值: same as minView (supported values are: 'decade', 'year', 'month', 'day', 'hour')

With this option you can select the view from which the date will be selected. By default it's the last one, however you can choose the first one, so at each click the date will be updated.

showMeridian

Boolean. 默认值: false

This option will enable meridian views for day and hour views.

initialDate

Date or String. 默认值: new Date()

You can initialize the viewer with a date. By default it's now, so you can specify yesterday or today at midnight ...

bootstrap日期选择器的属性非常多，这也给了用户较大的选择性,可以根据项目的需求定义自己想要的日期控件。

写了这么多乱七八糟的，我当时是没看懂，到底是怎么写的呢？

上个实例：会议室预订系统部分HTML代码

  1 <body>
  2 <div class="container">
  3     <div class="row">
  4         <div class="col-md-11">
  5             <h1>会议室预定</h1>
  6             <div class="data pull-right">
  7                 <button class="btn btn-primary" id="save">保存</button>
  8             </div>
  9             {#            日期#}
 10             <div class='col-sm-4 pull-right'>
 11                 <div class="form-group">
 12                     <div class='input-group date' id='datetimepicker2'  placeholder="请选择日期">
 13                         <input type='text' class="form-control"/>
 14                         <span class="input-group-addon">
 15                     <span class="glyphicon glyphicon-calendar"></span>
 16                 </span>
 17                     </div>
 18                 </div>
 19             </div>
 20 {#            表格#}
 21             <div>
 22                 <table class="table table-bordered">
 23                     <thead>
 24                     <th>会议室</th>
 25                       {% for metting in metting_list %}
 26                       <th>{{ metting.1 }}</th>
 27                       {% endfor %}
 28                     </thead>
 29                     <tbody id = "tBody">
 30 
 31 {#   方式二: 发送ajax请求渲染#}
 32 
 33                     </tbody>
 34                 </table>
 35             </div>
 36        {#  加载框  #}
 37             <div class="shade hide"></div>
 38             <div class="loading hide"></div>
 39         </div>
 40     </div>
 41 </div>
 42 <script>
 43     //对Date的扩展
 44     // 对Date的扩展，将 Date 转化为指定格式的String
 45     // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
 46     // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
 47     // 例子：
 48     // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
 49     // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
 50     Date.prototype.Format = function (fmt) { //author: meizz
 51         var o = {
 52             "M+": this.getMonth() + 1, //月份
 53             "d+": this.getDate(), //日
 54             "h+": this.getHours(), //小时
 55             "m+": this.getMinutes(), //分
 56             "s+": this.getSeconds(), //秒
 57             "q+": Math.floor((this.getMonth() + 3) / 3), //季度
 58             "S": this.getMilliseconds() //毫秒
 59         };
 60         if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
 61         for (var k in o)
 62             if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
 63         return fmt;
 64     };
 65 
 66     $(function(){    //一开始加载的时候执行这个函数
 67         initDatepickle();
 68         initRecoringInfo(new Date().Format("yyyy-MM-dd"));
 69         initTdEvent();
 70         initSaveEvent();
 71     });
 72 
 73     POST_DATA = {
 74         "ADD":{},
 75         "DEL":{}
 76     };
 77     //时间控件初始化
 78     function initDatepickle() {
 79        $('#datetimepicker2').datetimepicker({
 80         minView: "month",//设置只显示到月份
 81         format: 'yyyy-mm-dd',//显示格式
 82 {#        autoclose: true,//选完自动关闭#}
 83         todayBtn: true,
 84         language:"zh-CN",
 85          startDate: new Date(),  //以前的日期不能点
 86         bootcssVer:3  //小箭头
 87         }).on('changeDate', changeDate);
 88     }
 89     //点击日期插件的时候改变的函数
 90     function changeDate(ev) {
 91 {#        console.log(ev.date);  //Wed Dec 13 2017 20:43:08 GMT+0800 (中国标准时间)#}
 92         CHOISE_DATE = ev.date.Format("yyyy-MM-dd");  //拿到的是插件的日期
 93         initRecoringInfo(CHOISE_DATE);
 94 
 95     }
 96 
 97     CHOISE_DATE = new Date().Format("yyyy-MM-dd");  //当change的时候会修改日期，它拿到的是当前的日期
 98    //获取预定记录发送ajax请求
 99     function initRecoringInfo(date) {   //这里穿进来的date就是上面转换成字符串的时间
100 {#        刚开始发送ajax的时候加载#}
101         $(".shade,.loading").removeClass("hide");
102         $(function () {
103             $.ajax({
104                 url: "/recording/",
105                 type: "get",
106                 data: {"date": date},
107                 success: function (data) {
108                     $(".shade,.loading").addClass("hide");
109                     if (data.status) {
110                         $("#tBody").empty();
111                         $.each(data.data, function (i, item) {
112 {#                                                console.log(i,item);#}
113                             var $tr = $("<tr>");
114                             $.each(item, function (j, k) {
115                                 {#                        console.log(j,k);#}
116                                 var $td = $("<td>");
117                                 $td.text(k.text);
118                                 $.each(k.attrs, function (m, n) {
119                                     console.log(m, n);
120                                     $td.attr(m, n)
121                                 });
122                                 $tr.append($td);
123                                 {#                        if (k.chosen){#}
124                                 {#                            $("class").addClass("chosen")#}
125                                 {#                        }#}
126                             });
127                             $("#tBody").append($tr);
128                         });
129 
130                         //吧del,add里面有的内容清空
131                         CHOSEN_DATE = new Date().Format('yyyy-MM-dd');
132                         POST_DATA = {
133                             DEL:{},
134                             ADD:{}
135                         };
136                     }
137                     else {
138                         alert(data.msg)
139                     }
140                 },
141                 error:function () {
142                      $(".shade,.loading").removeClass("hide");
143                      alert("异常错误")
144                 }
145             })
146         })
147     }
148 
149 </script>
150 </body>

欢迎各种吐槽。

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。