bootstrp的datetimepicker插件獲取選定日期

　碰到一個日期選擇，並將日期存儲到數據庫的需求，需要利用bootstrp的datetimepicker插件獲取選定日期，並將其轉換為指定字符竄，簡單記錄下實現的過程。

1. datetimepicker插件的使用

　　關於datetimepicker插件的官方文檔：

　　http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

　　https://eonasdan.github.io/bootstrap-datetimepicker/    （英文原版）

　a，首先從第一個鏈接中下載相應的JS和CSS文件，並進行引用（需要引用bootstrap-min-css和bootstrap.min.js）

　　    CSS

　　　<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">
　　　<link rel="stylesheet" type="text/css" href="/static/datetimepicker/bootstrap-datetimepicker.min.css">

　　  JSS

　　   <script type="text/javascript" src="/static/jquery-3.3.1.js"></script>
　　   <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
　　   <script src="/static/datetimepicker/bootstrap-datetimepicker.min.js"></script>
　　   <script src="/static/datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>

　b，然后引入插件的布局代碼：

<div class='input-group' style="width: 230px;">
    <input type='text' class="form-control" id='datetimepicker'  placeholder="{{ order_date}}"/>
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

　　其中只要<input>標簽中的id=‘’datetimepicker“ 設置好就行，其他的為樣式和圖標

　c，在js代碼中進行顯示，代碼如下：

<script>   
 //日歷插件， 官網地址：https://eonasdan.github.io/bootstrap-datetimepicker/

    $('#datetimepicker').datetimepicker({
        minView: "month",  //設置月視圖
        language: "zh-CN",
        sideBySide: true,        // 同時選擇日期和時間，此處月視圖可以里不用設
        format: 'yyyy-mm-dd',    //設置日期顯示格式
        startDate: new Date(),    //設置開始時間，早於此刻的日期不能選擇
        bootcssVer: 3,            //顯示向左，向右的箭頭
        autoclose: true,      //選擇日期后自動關閉
        todayHighlight: true,
        todayBtn: true,
    }).on('changeDate', change_date);
    function change_date(e) {
        //console.log(e);
        //console.log(e.date);
        //console.log(e.date.valueOf());
        window.choose_date = e.date.format("yyyy-MM-dd");
        //location.href = "/order_list/?order_date=" + window.choose_date;

    };
    //$('#datetimepicker').datetimepicker().on('show',function(e){
        //console.log(e);
    //});
</script>

　　 　其中只要設置 $('#datetimepicker').datetimepicker()；就能顯示日歷，括號中的參數為設置日歷的格式，見官網option描述；

    　　為日歷綁定事件的基本格式如下面，第一個綁定日期改變事件，當日期變化時會執行后面的匿名函數（也可以將函數定義在外面），第二個綁定顯示事件，當日歷顯示時觸發相應的事件，更多事件見官網event描述。

　　$('#datetimepicker').datetimepicker().on('changeDate',function(e){

　　　　})

　　$('#datetimepicker').datetimepicker().on('show',function(e){

　　　　})

    函數的參數e中封裝了和日期相關的數據，如下面所示，其中兩個數據比較重要，e.date能拿到選定的日期時間數據，為js的Date對象，e.timeStamp為時間戳。

    至此，datetimepicker布局完成，並為其綁定事件，通過e.date 能拿到用戶選擇的日期數據，接下來將日期進行格式化成指定字符竄。

2. Date.prototype擴展Date對象

    在上述綁定的onchange事件中的代碼 e.date.format("yyyy-MM-dd")，format（）函數將拿到的e.date轉化為了指定格式的字符竄，詳細實現如下：

    在javascript中，設置Date.prototype可以擴展Date對象，將日期轉換為指定格式字符竄：

擴展代碼如下：

    // 對Date的擴展，將 Date 轉化為指定格式的String 
   // 月(M)、日(d)、小時(h)、分(m)、秒(s)、季度(q) 可以用 1-2 個占位符， 
   // 年(y)可以用 1-4 個占位符，毫秒(S)只能用 1 個占位符(是 1-3 位的數字) 
   // 例子： 
   // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
   // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
   Date.prototype.format = function(fmt)
{ 
  var o = {
   "M+" : this.getMonth()+1,                 //月份
   "d+" : this.getDate(),                    //日
   "h+" : this.getHours(),                   //小時
   "m+" : this.getMinutes(),                 //分
   "s+" : this.getSeconds(),                 //秒
   "q+" : Math.floor((this.getMonth()+3)/3), //季度
   "S"  : this.getMilliseconds()             //毫秒
  };
  if(/(y+)/.test(fmt))
   fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
  for(var k in o)
   if(new RegExp("("+ k +")").test(fmt))
  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
  return fmt;
}

使用方法代碼：  （注意年月日的大小寫 yyyy-MM-dd）

//使用方法
var now = new Date();
console.log(now);
var nowStr = now.format("yyyy-MM-dd hh:mm:ss");
console.log(nowStr);

//使用方法2:
var testDate = new Date();
console.log(testDate);
var testStr = testDate.format("yyyy年MM月dd日hh小時mm分ss秒");
console.log(testStr);

//示例：
//alert(new Date().format("yyyy年MM月dd日"));
//alert(new Date().format("MM/dd/yyyy"));
//alert(new Date().format("yyyyMMdd"));
//alert(new Date().format("yyyy-MM-dd hh:mm:ss"));

執行效果如下：

    相關博客：   https://blog.csdn.net/hizzyzzh/article/details/51212867