[筆記] HTML Input Date 最小值 最大值於 Safari 上失效

這回要實作一個表單時,想說不要額外引入一個 DatePicker 日期套件,用原生的 <input type=”date“> 就好,想不到這一決定讓我採到了現代版 IE a.k.a. Safari 的一個痛點:原生的 input date 上的 min 和 max 值在 Safari 上是沒有效果的。
html logo


內容

程式碼

可以在下方的 Codepen 試玩一下。



這邊也用手機截個圖,你就會發現在 iOS 手機上的 Safari 是無視 Min 和 Max 的。

notes-html-input-date-min-max-on-safari-not-working-1


解決方法

1. 裝第三方套件,如 Air Datepicker
2. 由於年月日可以拆分成三個欄位,所以也可以使用年月日三個欄位來分開設定即可


參考資料

1. Can I Use – Date and time input types
2. <input type=”date”>のイマイチなところ

按讚加入粉絲團

延伸閱讀