日期時間選擇器插件flatpickr

前言：在網頁上需要輸入時間的時候，我們可以用HTML5的inputl中的date類型。但是如下入所示，有些瀏覽器不支持。flatpickr這個小插件可以解決這個問題。

1.flatpickr日期時間選擇器插件的github地址為：https://chmln.github.io/flatpickr/。

2.裡面有很多例子，告訴我們呢怎麼設置，不過太多很容易讓人眼花。我這裡做一個最簡單的例子。

2.1引用人家的css和js

    //路徑一定要寫對
    <link rel="stylesheet" type="text/css" href="~/Content/flatpickr-master/flatpickr.css" />
    <script type="text/javascript" src="~/Content/flatpickr-master/flatpickr.js"></script>

2.2　寫一個input

 <input  class="InputTestStyle"   name="timeBefore"> 

2.3 初始化插件

document.getElementsByClassName("InputTestStyle").flatpickr();　

 2.4這個時候已經可以使用了，不過沒有一個預設的時間。所以自己設置一個預設的時間。

//創建一個當前日期對象
    var now = new Date();
    //格式化日，如果小於9，前面補0
    var day = ("0" + now.getDate()).slice(-2);
    //格式化月，如果小於9，前面補0
    var month = ("0" + (now.getMonth() + 1)).slice(-2);
    //拼裝完整日期格式
    var today = now.getFullYear() + "-" + (month) + "-" + (day);
    $(".InputTestStyle").val(today);

3.簡答的例子完成了，更多功能請參考下麵鏈接。

http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/201608213894.html