純JavaScript扁平風格日期時間選擇器是怎樣的

這篇文章將為大家詳細講解有關純JavaScript扁平風格日期時間選擇器是怎樣的，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

Flatpickr是一款功能強大的純JS扁平風格日期時間選擇器插件。該日期時間選擇器支持移動手機，提供多種內置的主題效果，使用SVG作為界面的圖標，支持對各種日期格式的解析。

安裝

可以通過npm或bower來安裝flatpickr日期時間選擇器插件。

npm install flatpickr bower install flatpickr-calendar

使用方法

在頁面中引入flatpickr.css和flatpickr.js文件。

<link rel="stylesheet" type="text/css" href="/path/to/flatpickr.css"> <script src="/path/to/flatpickr.js"></script>  

HTML結構

一個最簡單的日期時間選擇器的HTML結構如下：

<input id="flatpickr-tryme" placeholder="......">

初始化插件

有多種方法可以實例化一個日期時間選擇器。如下：

// 通過class名稱，返回一個數組 document.getElementsByClassName("myClass").flatpickr({..config}); // 通過ID document.getElementById("myID").flatpickr(); // 使用jQuery $(".calendar").flatpickr();  

配置參數

在配置參數中，所有的類型為string或boolean的參數都可以通過data-屬性在HTML標簽中進行設置。例如：data-min-date、data-default-date、data-default-date等。

參數類型默認值描述

altFormatstring"F j, Y"altInput的日期格式。altInputBooleanfalse是否使用某種用戶友好的方式來顯示日期時間。altInputClassString""添加到input上的自定義class類。例如bootstrap用戶可能需要添加一個form-control class。allowInputbooleanfalse是否允許用戶直接在輸入框中輸入日期。clickOpensbooleantrue是否在點擊輸入框時打開日期時間選擇界面。如果你想通過手動.open()方法來打開，該選項設置為false。dateFormatstring"Y-m-d"設置日期顯示格式。defaultDateString/Date Objectnull設置一個初始的日期。disablearray[]被禁用的日期。enableTimebooleanfalse是否啟用時間選擇。enableSecondsbooleanfalse在時間選擇器中是否可以選擇秒。noCalendarbooleanfalse是否隱藏日歷。hourIncrementinteger1小時輸入框的步長。minuteIncrementinteger5分鐘輸入框的步長。inlinebooleanfalse是否以內聯的方式顯示日歷。staticbooleanfalse日期選擇器位于包裹容器的位置。wrapBooleanfalse包裹元素。maxDateStringnull用戶可以選擇的最大日期。minDateStringnull用戶可以選擇的最小日期。onChangefunction(dateObject, dateString)null每次日期被選擇的時候都觸發該函數。onOpenfunction(dateObject, dateString)null每次日歷被打開時都會觸發該函數。onClosefunction(dateObject, dateString)null每次日歷被關閉時都會觸發該函數。parseDatefunctionfalse接收一個日期字符串并返回一個日期對象。shorthandCurrentMonthbooleanfalse以簡寫方式顯示月份weekNumbersbooleanfalse是否在日歷中顯示星期數。time_24hrbooleanfalse是否以24小時格式來顯示時間。utcbooleanfalse如果為true，日期將會被解析、格式化和顯示為UTC格式。prevArrowstring<向前箭頭圖標。nextArrowstring>向后箭頭圖標。

日期格式字符

字符描述示例

d月份中的天數，如果不滿2個數字的會前導0。01 - 31D一個星期中某一天的簡寫文本表示Mon - Sunl(小寫的L)一個星期中某一天的文本表示Sunday - Saturdayj不帶前導0的月份中的天數1 - 31J帶序號后綴，不帶前導0的月份中的天數1st, 2nd, to 31stw使用數字來代表星期中的某一天0 (星期天) - 6 (星期六)F月份的完整文本表示January - Decemberm使用數字來表示月份，前導帶0。01 - 12n使用數字來表示月份，前導不帶0。1 - 12M月份的簡寫文本表示Jan - DecU時間戳1413704993y兩個數字代表的年99 or 03Y4個數字代表的年1999 or 2003

時間格式字符

字符描述示例

H24小時制00 to 23h22小時制1 to 12i分鐘00 to 59S秒（不滿2位數補0）00 to 59s秒0 - 59KAM/PMAM or PM

關于該日期時間選擇器的本地化和其它一些使用方法，請參考演示DEMO。

關于純JavaScript扁平風格日期時間選擇器是怎樣的就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。