与 Input date 作斗争

万恶的 input,总有一天你会屈服的

前言介绍

input 作为表单元素的输入控件,承担着复杂而又繁重的角色。从文本到数字、网址、邮箱地址,再到单选、多选、滑动条,再到年月日时分,甚至于还有输入文件的功能,然而每一种类型都让人可爱可憎可恨。最近是跟这 type=date 系列杠上了,于是决定对它进行一番“批判”。

input 日期的种类

根据 w3school 中的介绍,一共就以下几种吧(都是 HTML5 中特有的类型)。

  • date
  • datetime
  • datetime-local
  • month
  • week
  • time

默认值的 Bug

input元素中支持同时显示日期和时间的类型为datetimedatetime-local两种,将yyyy-MM-dd hh:mm赋值给表单控件,类型为datetime的可以完美显示出来,但是类型为datetime-local就显示如下

The specified value "2018-08-09 20:54" does not conform to the required format.  The format is "yyyy-MM-ddThh:mm" followed by optional ":ss" or ":ss.SSS".

datetime在页面中显示就是一个纯文本框,想要页面出现日期时间选择的控件就必须使用datetime-local,但它默认是不支持yyyy-MM-dd hh:mm格式的时间的,那就想着把它转换成一个Date对象吧。在 PC 端浏览器是可以直接使用new Date()将其转换成一个Date对象的,而到了手机端,却像个失忆患者一样,拼命的告诉你转换的值为null

在查询资料之后,发现移动端浏览器中的Date对象是不支持yyyy-MM-dd hh:mm这种格式的时间字符串,需要将其改变为yyyy/MM/dd hh:mm形式。然后在改变之后生成的值竟然和实际的值相差 8 个小时(对应当地东八区):

const date = '2018/08/09 20:54';
new Date(date); // PC 端     2018/08/09 20:54
new Date(date); // mobile 端 2018/08/09 12:54

尝试着按照上面的提示将原时间字符串格式转换为yyyy-MM-ddThh:mm,就真的可以正确的给input元素添加默认值了。

HTML5 中new Date的时区

在上一节中,在移动端使用yyyy/MM/dd hh:mm的格式给进行Date对象实例化的时候,会出现生成的时间直接显示成 0 时区,继续摸索中又发现实例化出来的Date对象调用getHours函数时获取出来的小时数又是经过了当地时区转化的,因而能大致得出结论:移动端中Date对象生成的时间转换成字符串的时候是默认不带时区,时间对象本身的值还是没有问题的。
接下来,坑爹的事情来了。在页面中使用了datetime-local用于时间选择后,现在已经能够正常赋值了(前提是使用yyyy-MM-ddThh:mm格式),其实也理所应当的,选择时间后,返回的依然是yyyy-MM-ddThh:mm格式的时间字符串(依然是 0 时区),然后再将这个值转化成Date对象,返回的值比预想中要大了 8 个小时,没毛病,毕竟它显示的值就是 0 时区的,再转换回东八区时间就是加 8 个小时,但问题是 PC 端转换出来的值又是正确的,总有一方得妥协。毫无疑问,选择就是你了——移动端。

移动端取值、赋值的处理

以上已经能够了解移动端中input元素datetime-local类型的坑了,接下来就是解决方案。
首先是在赋值默认值的时候,将获取到的时间戳转换成yyyy-MM-ddTmm:hh格式的字符串(不能使用toISOString方法,该方法会返回 0 时区的值,导致字面上看起来又少了 8 个小时)。
然后再选择完时间之后,提交表单的时候将获得的yyyy-MM-ddTmm:hh格式的时间字符串将T替换成即可:

date.replace('T', ' ');

这样就能实现 PC 端和移动端兼容的input时间选择功能。

小结

HTML5 虽然发展到现在已经很不错了,但在input中的日期类型中还有一定的路要走。

附上博客传送门:https://blog.paddings.cn/2018/07/24/html/input-date/

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 116,453评论 15 132
  • pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类: pyspark.sql...
    mpro阅读 7,701评论 0 11
  • SwiftDate概况 从Swift发布起,我们就没有放弃使用Swift。 当然,我们希望在项目能够轻松自如地管理...
    Mee_Leo阅读 6,103评论 1 13
  • 有无镜框的世界 到底是我们成熟了还是这个世界本就如此呢!现在越来发现自己眼睛看到的世界和真实的世界有着非常大之差别...
    琅琊老常阅读 32评论 0 0
  • 山西日报记者 姚毅 通讯员魏飞 吕克礼摄影报道 2月9日,记者从永济市餐饮协会获悉,春节前夕,该市中小企业...
    法治观察阅读 129评论 0 0