如何在移动端更好地使用HTML5 date input

Question

如何在移动端更好地使用HTML5 date input

Answer 1

实现原理很简单，就是用一个text input做初始化日期展示，右边的向下箭头用label实现，设置for属性为text input的id。这样点击label时自动聚焦到input。text input获取焦点后立即将自己的type改为date，这样就有date picker的行为了。失去焦点后再改回type=”text”，依旧显示text input。如果仅仅是这样，还有个小问题，就是当input是text类型的时候，直接点击input，虽然type变成date了，但并不会触发picker，而是需要再次点击。这显然不符合要求，需要继续改善。受到前面的label启发，咱们可以在input上方覆盖一个透明的label，同样设置for属性为input的id。这样就不能直接点击到input，而是上层的label，同样会触发picker。至此，貌似完美解决了问题。但是且慢，在iPhone上用浏览器打开，发现无法触发picker！这是要闹哪样？无奈，只好在label上再监听点击事件，用代码将input改为date，同时让它获取焦点。这回应该可以了吧？自己试试