在使用像angular、react、vue等框架以及jquery库的项目来说,datepicker的选择可以有很多,有大量优质现成的datepicker插件,但对于没有使用框架和库或者使用的框架和库的使用者不多时,datepicker就需要自己实现。

基于移动端的input[type=date] 的操作体验及选择器的样式较好且输出格式在个平台上统一,因此移动端的datepicker可以使用input[type=date],但由于input[type=date]的样式是在不忍直视,所以需要进行一些特殊处理。

<div class="date-picker">
    <input type="date">
    <div class="picker-view"></div>
</div>

由于input[type=date]的文本显示样式不能修改,且样式不统一,所以对其设置“opacity:0”;

实际看到的内容为picker-view,此部分可以根据设计图设置css,内容由js根据input的选择结果进行更改;

需要注意的是input[type=date]没有提供触发选择控件弹出的事件(或许只是我没有找到),因此触发控件弹出需要直接对input[type=date]进行操作,css中会加入“z-index:2”;

另外input[type=date]设置时间时若月份/日期<10,且前面没有添加0会设置失败,这点需要格外注意;

 

pc端input[type=date]的操作体验并不理想,因此个人认为还是需要自己去实现;

posted on 2017-03-20 11:02  leastRookie  阅读(121)  评论(0编辑  收藏  举报