# 日期時間選擇器比較

## 介紹
日期選擇器很常見，但時間選擇器就比較少，我想要找能夠符合以下條件的選擇器
1. 電腦和手機都要可以好操作的 (可以兩套但是要好切換 不衝突)
2. 最小單位要可以選到"分"
3. 我想像中的介面是像手機版 google 日曆那樣有時鐘選項的，不過電腦版日曆似乎只有用下拉選單

我最終選擇的是 Flatpickr 和 pglejzer/timepicker-ui 這兩個元件。

## Flatpickr 專注在選擇器的元件 免費 MIT
https://flatpickr.js.org/examples/
用 Android 或 iPhone 手機操作時會呼叫原生UI元件，還會自動依照使用者手機做語系切換 (中文)，也支援自訂時間格式 dateFormat: "Y-m-d H:i" ，是目前找到的套件首選
硬要挑缺點就是電腦版的時間選項一樣只能一個個點，沒有辦法用滾輪快速切換，但可以設定最小尺度(例如5分鐘為單位)，可以點的不那麼頻繁，也可搭配鍵盤直接輸入數字就不用慢慢點


補充，在F2E FB社團中問到了手機瀏覽器呼叫原生 picker 的語法 ```<input type="datetime-local">```
https://www.facebook.com/photo/?fbid=1284030379186563&set=p.1284030379186563

---

## pglejzer/timepicker-ui 免費 MIT license
* 原始碼和文件 https://github.com/pglejzer/timepicker-ui
* 範例 https://www.cssscript.com/demo/material-time-picker-ui/

原生js即可，有多種介面，電腦模式也支援小時鐘，如果不需要把**日期**放在同一個欄位，可以拆開的話，這會是個不錯的選擇。

---

後面的部分放上我在尋找過程中我找到的各種選擇器並列出優劣

---

## AIR DATEPICKER 免費 MIT license
https://air-datepicker.com/
* 時間的部分是用橫軸拖曳，手機也是一樣的介面，雖然畫面比較小但操作還算輕巧

* 但時間軸還算是普通且常見的功能，比較特殊的點是他的**日期**上面可以塞 emoji 圖案，這是比較特殊的亮點

---

## nehakadam DateTimePicker (免費 MIT)
https://nehakadam.github.io/DateTimePicker/
每一項數值都是用+ - 一個個按增加或減少
不支援滑動滾動快速切換
也不支援長按快速增加或減少，雖然可以直接輸入數字，但手機介面用起來不是很順暢，要長按輸入框，等彈跳動畫出完了才能做操作。

---

## mui Date Time Picker (免費 MIT 有付費版但日期選擇器在免費範圍)
https://mui.com/x/react-date-pickers/date-time-picker/
只有 React，日期的部分有圖形介面，時間是手動輸入數字

---

## xdan/datetimepicker (免費 MIT license)
https://xdsoft.net/jqplugins/datetimepicker/
有日期時間，可自訂顏色，電腦上操作正常，但手機操作彈跳視窗的滑動卷軸時選項會跳掉，無法正常使用，就算改用 inline的模式，選擇時也會因為滑動導致選不到，最後一下用點擊的才能正確選擇造成操作不流暢

---

## Zebra_Datepicker (LGPL授權)
https://stefangabos.github.io/Zebra_Datepicker/
相依於jquery 1.7 ，時間的選項躲得比較隱密(右下角的時鐘)，但點開之後時間很大一個，時間選項一樣只能一個個點

手機模式不會呼叫原生UI，有更多空間可以自訂樣式


---

## MDB Timepicker (時間選擇器要付費)
https://mdbootstrap.com/docs/standard/forms/timepicker/

MDB 是很強大且功能完整的前端框架，雖然也有免費商業使用的部分，但日期選擇器是Premium components，有個鑽石圖案，付費方案才能使用
電腦介面支援長按快速切換分鐘數以及仿手機UI的小時鐘的介面


官方付費方案中，最便宜的方案是 ESSENTIAL 一年€279歐元

---

## mobiscroll - Modern Javascript date & time picker (時間選擇器要付費)
https://demo.mobiscroll.com/javascript/datetime/date-picker

雖然有免費版的Mobiscroll Forms，例如這兩個
* https://download.mobiscroll.com/free
* https://github.com/acidb/mobiscroll
但免費版不包含Date & Time的選擇器

付費版的功能強大，介面完善，支援原生js、jquery、angular 或是 react等多種框架，文件充足又支援多國語系(沒有中文)，就是費用稍微高了點
$245 / LICENSE

---

## 加碼，叫 chatgpt 幫忙找，以下是咒文區

我想要尋找前端的套件，我需要有支援時間選擇器，這個選擇器需要包含以下功能：
1. 可支援 rwd 響應式設計。
2. 對觸控操作友善。
3. 單位需要可以選擇分鐘。

舉例 jquery datepicker就是符合日期選擇器但未提供時間選擇器所以不完全滿足我的下需求。請提供我5個完全符合我需求的套件名稱。

---

## ChatGPT 以下是五個符合您需求的前端套件名稱：

Flatpickr：Flatpickr 是一個輕量級、自定義程度高且具有響應式設計的時間選擇器，它支援觸控操作，並且可以選擇到分鐘的單位。您可以在 https://flatpickr.js.org/ 找到更多資訊。

Pikaday：Pikaday 是另一個輕量級的日期和時間選擇器，同時支援觸控操作和響應式設計。您可以透過 https://pikaday.com/ 瞭解更多關於 Pikaday 的詳細資訊。
> 但實際看了之後 Pikaday 不支援時間 Pikaday is a pure datepicker. It will not support picking a time of day.

DateTimePicker：DateTimePicker 是一個功能豐富的日期和時間選擇器，它具有響應式設計，並且可以選擇到分鐘的單位。您可以在 https://xdsoft.net/jqplugins/datetimepicker/ 獲取 DateTimePicker 的相關資訊。

Zebra_Datepicker：Zebra_Datepicker 是一個輕量級的日期和時間選擇器，同時支援觸控操作和響應式設計。您可以透過 https://github.com/stefangabos/Zebra_Datepicker 了解更多關於 Zebra_Datepicker 的詳細資訊。

Mobiscroll：Mobiscroll 是一個具有豐富功能的日期和時間選擇器，它支援觸控操作、響應式設計以及分鐘的選擇。您可以在 https://mobiscroll.com/datepicker 瞭解更多關於 Mobiscroll 的詳細資訊。

請注意，這些套件都有不同的特點和使用方式，建議您參考它們的官方網站以便選擇最適合您需求的套件。

###### tags: `前端`