日期範圍選擇器 - DateTimeRanger

Result HTML

1
2
3
4
5
6
7
<div class="date-time-ranger" data-date-time-ranger>
  <input class="date-input" data-date-start /><!--
  --><input class="time-input" data-time-start data-step="60" /><!--
  --><button class="icon-arrow-right" data-btn-arrow tabindex="-1"></button><!--
  --><input class="date-input" data-date-end /><!--
  --><input class="time-input" data-time-end data-step="60" />
</div>

DateTimeRanger HTML

<div class="date-time-ranger" data-date-time-ranger>
  <input class="date-input" data-date-start />
  <input class="time-input" data-time-start />
  <button class="icon-arrow-right" data-btn-arrow tabindex="-1"></button>
  <input class="date-input" data-date-end />
  <input class="time-input" data-time-end />
</div>

屬性名稱	用途
data-date-start	指定為開始日期的輸入文字框
data-date-end	指定為結束日期的輸入文字框
data-time-start	指定為開始時間的輸入文字框
data-time-end	指定為結束時間的輸入文字框
data-btn-arrow	指定為 dateTimeRanger 的按鈕
data-step	指定時間選單的間隔，預設 30 分。

DateTimeRanger JS

constructor

const dateTimeRanger = new DateTimeRanger(dom, options)

名稱	型別	說明
dom	HTMLElement	需要指定為 dateTimeRanger 的元素
options	object	選項
options.startAt	integer	開始時間，unix timestamp
options.endAt	integer	結束時間，unix timestamp
options.tz	string	時區，預設為 Asia/Taipei
options.locale	object	語系，預設為 zh-TW。可以從 date-fns/locale/ import
options.change	function	dateTimeRanger 時間被更新時的 callback
options.noFuture	Date	是否可以選擇未來月份，預設可以選 ( noFuture = false )

destroy

移除 dateTimeRanger 產生的 dom 元素與 event listeners

dateTimeRanger.destroy()