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刪除。