利用input新类型,解决移动端原生实现日期时间联动问题,精确到分

最近在做项目有一个需求是希望用原生的东西实现一个选完日期选时间的效果;

在此之前对于这样的页面需求,最常见的方案是用Javascript日期选择组件。这几乎是无可争议、别无选择的做法。

考虑到新需求,故最开始尝试考虑用两个标签实现,但是实现起来体验不好,需要挨个点击来选择;

经过查找资料遇到了一个之前未曾注意到的东西,可以完美实现上述需求;

就是input在HTML5中新加的对象:datetime-local

HTML代码如下:

<input type="datetime-local" value="" placeholder="">

  缺点是:由于各个浏览器对于时间空间的封装不同,所弹出的样式也不同,不能做到统一样式;不过在移动端的界面表现都挺良好的。

posted @ 2017-03-17 14:57  千诚  阅读(1428)  评论(1编辑  收藏  举报