Element UI 的時(shí)間及日期選擇器

TimePicker 時(shí)間選擇器

用于選擇或輸入日期。

  • 固定時(shí)間點(diǎn)
    提供幾個(gè)固定的時(shí)間點(diǎn)供用戶選擇。
    使用 el-time-select 標(biāo)簽,分別通過start、end和step指定可選的起始時(shí)間、結(jié)束時(shí)間和步長。



  • 任意時(shí)間點(diǎn)
    可以選擇任意時(shí)間。
    使用 el-time-picker 標(biāo)簽,通過selectableRange限制可選時(shí)間范圍。提供了兩種交互方式:默認(rèn)情況下通過鼠標(biāo)滾輪進(jìn)行選擇,打開arrow-control屬性則通過界面上的箭頭進(jìn)行選擇。



  • 固定時(shí)間范圍
    若先選擇開始時(shí)間,則結(jié)束時(shí)間內(nèi)備選項(xiàng)的狀態(tài)會(huì)隨之改變。



  • 任意時(shí)間范圍
    可選擇任意的時(shí)間范圍。
    添加is-range屬性即可選擇時(shí)間范圍,同樣支持arrow-control屬性。



  • Attributes




  • Time Select Options


  • Time Picker Options


  • Events


  • Methods


DatePicker 日期選擇器

用于選擇或輸入日期。

  • 選擇日
    以「日」為基本單位,基礎(chǔ)的日期選擇控件。
    基本單位由type屬性指定??旖葸x項(xiàng)需配置picker-options對(duì)象中的shortcuts,禁用日期通過 disabledDate 設(shè)置,傳入函數(shù)。



  • 其他日期單位
    通過擴(kuò)展基礎(chǔ)的日期選擇,可以選擇周、月、年或多個(gè)日期。



  • 選擇日期范圍
    可在一個(gè)選擇器中便捷地選擇一個(gè)時(shí)間范圍。
    在選擇日期范圍時(shí),默認(rèn)情況下左右面板會(huì)聯(lián)動(dòng)。如果希望兩個(gè)面板各自獨(dú)立切換當(dāng)前月份,可以使用unlink-panels屬性解除聯(lián)動(dòng)。



  • 選擇月份范圍
    可在一個(gè)選擇器中便捷地選擇一個(gè)月份范圍。
    在選擇月份范圍時(shí),默認(rèn)情況下左右面板會(huì)聯(lián)動(dòng)。如果希望兩個(gè)面板各自獨(dú)立切換當(dāng)前年份,可以使用unlink-panels屬性解除聯(lián)動(dòng)。



  • 日期格式
    使用format指定輸入框的格式;使用value-format指定綁定值的格式。
    默認(rèn)情況下,組件接受并返回Date對(duì)象。以下為可用的格式化字串,以 UTC 2019年1月2日 03:04:05 為例:
    注:請(qǐng)注意大小寫。





  • 默認(rèn)顯示日期
    在選擇日期范圍時(shí),指定起始日期和結(jié)束日期的默認(rèn)時(shí)刻。
    選擇日期范圍時(shí),默認(rèn)情況下,起始日期和結(jié)束日期的時(shí)間部分均為當(dāng)天的 0 點(diǎn) 0 分 0 秒。通過default-time可以分別指定二者的具體時(shí)刻。default-time接受一個(gè)數(shù)組,其中的值為形如12:00:00的字符串,第一個(gè)值控制起始日期的時(shí)刻,第二個(gè)值控制結(jié)束日期的時(shí)刻。



  • Attributes




  • Picker Options


  • Shortcuts


  • Events


  • Methods


DateTimePicker 日期時(shí)間選擇器

在同一個(gè)選擇器里選擇日期和時(shí)間。
DateTimePicker 由 DatePicker 和 TimePicker 派生,Picker Options 或者其他選項(xiàng)可以參照 DatePicker 和 TimePicker。

  • 日期和時(shí)間點(diǎn)
    通過設(shè)置type屬性為datetime,即可在同一個(gè)選擇器里同時(shí)進(jìn)行日期和時(shí)間的選擇??旖葸x項(xiàng)的使用方法與 Date Picker 相同。



  • 日期和時(shí)間范圍
    設(shè)置type為datetimerange即可選擇日期和時(shí)間范圍。



  • 默認(rèn)的起始與結(jié)束時(shí)刻
    使用datetimerange進(jìn)行范圍選擇時(shí),在日期選擇面板中選定起始與結(jié)束的日期,默認(rèn)會(huì)使用該日期的00:00:00作為起始與結(jié)束的時(shí)刻;通過選項(xiàng)default-time可以控制選中起始與結(jié)束日期時(shí)所使用的具體時(shí)刻。default-time接受一個(gè)數(shù)組,數(shù)組每項(xiàng)值為字符串,形如12:00:00,其中第一項(xiàng)控制起始日期的具體時(shí)刻,第二項(xiàng)控制結(jié)束日期的具體時(shí)刻。



  • Attributes




  • Picker Options


  • Shortcuts


  • Events


  • Methods


  • Slots


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容