烙印99

眾所周知，HTML5新增了幾種input類型，比如email, number, url, range, date等。這些input類型在一定程度上方便了我們做輸入限制和數據校驗。但是不同的瀏覽器廠商的實現方式又不太一樣，導致在UI和交互上有細微的差別。今天就來談談date這個比較有用的元素。其實date只是Date pickers中的一種，其他的還有month, week, time, datetime, datetime-local等，分別針對不同的時間-日期選擇場景。以往我們要實現類似的日期和時間選擇，通常要自己封裝一個組件，或者使用現成的第三方插件。這類插件也多如牛毛，質量參差不齊，也很難滿足所有的業務需求。如果有原生的控件支持，不但可以省去使用插件的麻煩，還可以獲得原生的性能優勢和體驗上的一致性。HTML5 date input就是為此而生的。然而，正如前面提到的，即便是有標準，也不能保證所有瀏覽器上都是一樣的。PC瀏覽器就不說了，IE11都不支持。今天主要討論下如何在移動端使用date input。移動端date input大概是這樣的(手機自帶瀏覽器)date input彈出的日期選擇界面還過得去，但是date input本身的UI卻太土了。你可能想到了用CSS設置樣式，但試過之后你會發現，Designer隨便給個UI都夠你去折騰的了。stackoverflow上有個答案，關于如何自定義date input樣式的，效果仍然丑到爆。這時候就需要轉變下思路了。既然設置date input的樣式如此麻煩，為什么不用其他元素做UI，而它自己只負責交互呢？比如可以用text input，甚至div做日期展示。這類元素的樣式設置起來容易多了，而且兼容性也較好。這里我們選擇text input，原因在后面說明。先看效果：placeholderpick datedisplay實現原理很簡單，就是用一個text input做初始化日期展示，右邊的向下箭頭用label實現，設置for屬性為text input的id。這樣點擊label時自動聚焦到input。text input獲取焦點

總結

以上是生活随笔為你收集整理的html5手机端设置date,如何在移动端更好地使用HTML5 date input的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。