日期時間選擇器插件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