純JavaScript扁平風(fēng)格日期時(shí)間選擇器是怎樣的

這篇文章將為大家詳細(xì)講解有關(guān)純JavaScript扁平風(fēng)格日期時(shí)間選擇器是怎樣的，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

Flatpickr是一款功能強(qiáng)大的純JS扁平風(fēng)格日期時(shí)間選擇器插件。該日期時(shí)間選擇器支持移動(dòng)手機(jī)，提供多種內(nèi)置的主題效果，使用SVG作為界面的圖標(biāo)，支持對(duì)各種日期格式的解析。

安裝

可以通過(guò)npm或bower來(lái)安裝flatpickr日期時(shí)間選擇器插件。

npm install flatpickr bower install flatpickr-calendar

使用方法

在頁(yè)面中引入flatpickr.css和flatpickr.js文件。

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

HTML結(jié)構(gòu)

一個(gè)最簡(jiǎn)單的日期時(shí)間選擇器的HTML結(jié)構(gòu)如下：

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

初始化插件

有多種方法可以實(shí)例化一個(gè)日期時(shí)間選擇器。如下：

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

配置參數(shù)

在配置參數(shù)中，所有的類型為string或boolean的參數(shù)都可以通過(guò)data-屬性在HTML標(biāo)簽中進(jìn)行設(shè)置。例如：data-min-date、data-default-date、data-default-date等。

參數(shù)類型默認(rèn)值描述

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

日期格式字符

字符描述示例

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

時(shí)間格式字符

字符描述示例

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

關(guān)于該日期時(shí)間選擇器的本地化和其它一些使用方法，請(qǐng)參考演示DEMO。

關(guān)于純JavaScript扁平風(fēng)格日期時(shí)間選擇器是怎樣的就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。