眾所周知，HTML5新增了幾種input類型，比如email, number, url, range, date等。這些input類型在一定程度上方便了我們做輸入限制和數(shù)據(jù)校驗。但是不同的瀏覽器廠商的實現(xiàn)方式又不太一樣，導(dǎo)致在UI和交互上有細(xì)微的差別。今天就來談?wù)刣ate這個比較有用的元素。
其實date只是Date pickers中的一種，其他的還有month, week, time, datetime, datetime-local等，分別針對不同的時間-日期選擇場景。以往我們要實現(xiàn)類似的日期和時間選擇，通常要自己封裝一個組件，或者使用現(xiàn)成的第三方插件。這類插件也多如牛毛，質(zhì)量參差不齊，也很難滿足所有的業(yè)務(wù)需求。如果有原生的控件支持，不但可以省去使用插件的麻煩，還可以獲得原生的性能優(yōu)勢和體驗上的一致性。HTML5 date input就是為此而生的。然而，正如前面提到的，即便是有標(biāo)準(zhǔn)，也不能保證所有瀏覽器上都是一樣的。PC瀏覽器就不說了，IE11都不支持。今天主要討論下如何在移動端使用date input。
移動端date input大概是這樣的（手機自帶瀏覽器）
彈出的日期選擇界面還過得去，但是date input本身的UI卻太土了。你可能想到了用CSS設(shè)置樣式，但試過之后你會發(fā)現(xiàn)，Designer隨便給個UI都夠你去折騰的了。stackoverflow上有個答案，關(guān)于如何自定義date input樣式的，效果仍然丑到爆。
這時候就需要轉(zhuǎn)變下思路了。
既然設(shè)置date input的樣式如此麻煩，為什么不用其他元素做UI，而它自己只負(fù)責(zé)交互呢？比如可以用text input，甚至div做日期展示。這類元素的樣式設(shè)置起來容易多了，而且兼容性也較好。這里我們選擇text input，原因在后面說明。
先看效果：
實現(xiàn)原理很簡單，就是用一個text input做初始化日期展示，右邊的向下箭頭用label實現(xiàn)，設(shè)置for屬性為text input的id。這樣點擊label時自動聚焦到input。text input獲取焦點后立即將自己的type改為date，這樣就有date picker的行為了。失去焦點后再改回type="text"，依舊顯示text input。如果僅僅是這樣，還有個小問題，就是當(dāng)input是text類型的時候，直接點擊input，雖然type變成date了，但并不會觸發(fā)picker，而是需要再次點擊。這顯然不符合要求，需要繼續(xù)改善。受到前面的label啟發(fā)，我們可以在input上方覆蓋一個透明的label，同樣設(shè)置for屬性為input的id。這樣就不能直接點擊到input，而是上層的label，同樣會觸發(fā)picker。至此，貌似完美解決了問題。但是且慢，在iPhone上用瀏覽器打開，發(fā)現(xiàn)無法觸發(fā)picker！這是要鬧哪樣？無奈，只好在label上再監(jiān)聽點擊事件，用代碼將input改為date，同時讓它獲取焦點。這回應(yīng)該可以了吧？自己試試，有問題再改進~
最終效果點這里，用手機瀏覽器打開
