2015年10月12日

2015年10月12日_第1张图片
mark

今天和公司的前端一起研究页面,有点心得,标记下新学的技能:

引出:优化新插件的页面,表单页面需要调用时间插件,使用户可以输入年月日,使用了几款外部插件,效果均不理想

HTML5调用手机的Datepicker(日期选择器)

再一次感受到了HTML5的强大之处,本来很复杂的一个万年历插件,用HTML5来实现只需要一行代码!

  • HTML5中新的input类型:
    email,url,number,range,** Datepicker **,search,color

  • HTML5中的datepicker拥有多种可供选取日期和时间的新输入类型:
    1.date - 选取年、月、日
    2.month - 选取月、年
    3.week - 选取周、年
    4.time - 选取小时、分钟
    5.datetime - 选取时间、日、月、年(UTC时间)
    6.datetime-local - 选取时间、日、月、年(本地时间)

例如:将显示年月选择器
在chrome上浏览的效果:


2015年10月12日_第2张图片
chrome浏览器的效果

在在iPhone5s、iOS7上的效果:


2015年10月12日_第3张图片
iPhone上的的效果

本来几十行代码,调用好几个文件才能实现的效果,HTML5一个input标签就搞定了,真心屌!

最后附一张加班自拍图o( ̄▽ ̄)o


2015年10月12日_第4张图片
假装工作,其实自拍

你可能感兴趣的:(2015年10月12日)