最近与type=”time”类型的input输入框打了不少交道，学到了不少知识，和大家分享下。

一、关于兼容性和UI表现

1. Safari浏览器

Safari桌面端浏览器目前并不支持time输入框，14之后的版本貌似会支持，兼容性图如下：

2. Chrome浏览器

Chrome浏览器的兼容性相当不错，各个操作系统，以及移动端均支持。

并且Chrome浏览器点击输入框右侧的图标会显示下拉选择。

但是，很奇怪的是，根据我在多个设备上测试。

Chrome浏览器在windows系统下，time是使用的24小时表示法，比较符合中国人看时间的习惯。

但是Chrome浏览器在OS X系统下，time居然使用的是12小时表示法。

3. Firefox浏览器

但是在Windows系统下的Firefox浏览器，居然又是12小时表示法，如下图所示：

并且没有下拉列表，只能通过上下键修改时间或者分钟。

上面这几个浏览器UI上的差异给开发带来了不小的困扰。

需求是这样的，所有浏览器均支持下拉的小时和分钟选择，同时保持input的输入框是time类型，这样有最佳的语义。

但是时间格式的不一致，使得开发的时候无法确定，下拉应该是12小时表示还是使用24小时表示。

这个问题的解决是本文重点介绍的内容。

二、时间表示法是无法统一的

我花了大量的时间去研究能够通过设置某些属性，例如lang属性，或者datetimeformat属性修改日期时间的显示格式。

结论是time/date等类型等时间输入框等时间格式是无法改变等。

如果大家有办法可以设置，我请大家吃饭。

既然没法保持一致，那就时间输入框是什么时间格式，UI组件实现的时候就是什么格式。

所以下面的问题就变成了，如何判断当前浏览器下的time输入框是24小时表示的，还是12小时表示的呢？

二、24小时表示还是12小时表示的判断

是这样的，虽然视觉上，Mac设备下是12小时制的，也即是“上午 11:23”，但是使用 input.value 返回的依然是24小时表示的。

也就是下面的HTML代码：

在windows Chrome浏览器下显示的是 13:14，在windows Firefox浏览器和OS X Chrome浏览器下显示的是 下午 01:14 ，但是使用value属性获取，返回的全部都是 13:14，完全没有办法通过值来判断当前浏览器支持的是24小时表示H:mm，还是12小时表示ah:mm。

//zxx: 如果你看到这段文字，说明你现在访问是体验糟糕的垃圾盗版网站，你可以访问原文获得很好的体验：https://www.zhangxinxu.com/wordpress/?p=9906(作者张鑫旭)

我有想过基于操作系统和浏览器判断，但是这样的判断是不安全的，容易出错的，因为英文 windows语言操作系统下的Chrome不见得是24小时表示。

怎么办呢，有没有什么比较精确的，与操作系统无关的判断方法呢？后来使用了自己还觉得不错的一招。

字符个数导致尺寸变化差异不同

浏览器如果支持time类型输入框，则输入框的尺寸是跟着里面的字符个数走的。

如果输入框显示的是 13:14，则输入框的宽度是 13:14 外加一个图标尺寸。如下图所示：

如果输入框显示的是 下午 01:14，则输入框的宽度是字符“下午 01:14”宽度外加一个图标尺寸。如下图所示：

由于字符个数不同，因此，当改变输入框的字号大小之后，输入框的尺寸变化也会有所不同。

例如文字从20px -> 30px，则5个字符变化的宽度显然要比7个字符变化的宽度小。

于是，我们就可以根据前后输入框尺寸变化大小预估输入框内字符的个数，这样我们就能知道输入框是24小时表示的，还是12小时表示的了。

基于上面原理，写了个判断方法：

// 默认是24小时类型，不支持time类型输入框的浏览器会使用此类型，例如Safari

let datetimeformat = 'H:mm';

// 根据尺寸判断

let eleInputTmp = document.createElement('input');

eleInputTmp.setAttribute('type', 'time');

eleInputTmp.value = '00:00';

document.body.append(eleInputTmp);

// 默认不可见

eleInputTmp.style.position = 'absolute';

eleInputTmp.style.left = '-999px';

eleInputTmp.style.fontFamily = 'revert';

// 如果浏览器不支持time类型输入框，例如Safari，则使用H:mm格式

if (eleInputTmp.type == 'time') {

eleInputTmp.style.fontSize = '20px';

// 获取此时输入框的尺寸

let numWidthOrigin = eleInputTmp.clientWidth;

// 修改尺寸

eleInputTmp.style.fontSize = '30px';

// 比较前后尺寸变化的差异

let numDiffWidth = eleInputTmp.clientWidth - numWidthOrigin;

// 可以判断输入框字符个数

let numLetters = Math.ceil(numDiffWidth / 10);

if (numLetters >= 5) {

datetimeformat = 'ah:mm';

}

eleInputTmp.remove();

}

datetimeformat就是最终判断的时间表示格式。

当前后变化尺寸不小于5个字符宽度的时候，则认为是12小时表示法。此时，UI组件就可以以12小时表示法的排版设计交互效果了，否则使用24小时表示法。

最终实现效果预览，Safari浏览器，以及Windows Chrome浏览器下：

Firefox浏览器下：

这样，美化的UI交互就可以和浏览器原生行为保持一致了。

四、step属性与分秒选择的细节

默认情况下，time类型的输入框只能选择到分钟，如果想要秒也能选择，有下面2个方法。

1. 设置初始值是00:00:00格式

例如：

则秒的值就会显示出来。

例如windows系统下的Chrome浏览器：

从上图可以看出，虽然秒出现了，但是是置灰的，原因是此时的step是按照60来渲染的。

这就引出下一个设置秒选择的方法。

2. 设置合适的step值

time类型的输入框，只要step的值不是60的倍数，则如果value初始值是什么，一定会精确到秒进行显示。

例如下面的HTML代码：

最终全部都是可以选择到秒。

如下截图所示：

但是如果step属性值是60的倍数，则此时step会认为是分钟，此时，如果value的值不是00:00:00格式，则时间的选择会精确到分钟；如果value的值是00:00:00格式，则秒默认置灰。

例如：

则渲染效果如下图所示：

因此，要想value="13:14:20"设置后秒的值20不置灰，只需要设置step属性值为1就可以了。

此时，后面的20就不是灰色的了。

step不影响value值的设置

step虽然语义上表示时间的间隔，但是行为上并没有阻止value的设置，什么意思呢？

例如：

表示秒的步阶是30秒，也即是00:00:00或者00:00:30才是合法的值，但是，实际上，你下拉列表选择00:00:20也是可以的，step限制的是上下键快捷选择时候的值，并没有限制点击行为，以及直接使用value赋值的限制。

这是step的另外一个细节知识。

五、其他细节、移动端、结语

其他细节

无论是value属性设置的值，还是 step/min/max属性设置的值，都必须是严格的00:00或者00:00:00格式，也就是前面的0必须补全，例如下面的HTML中的value设置就是无效的：

渲染出来的就是4个短横线(如下图效果)，value值必须写成 value="03:14" 才可以。

min/max属性和step属性一样，只能影响上下键这样的快捷键选择，并不能阻止点击选择不再限制范围中的值。

Chrome浏览器暴露了很多伪元素，可以用来修改默认的时间选择控件的样式细节，例如::-webkit-datetime-edit、::-webkit-datetime-edit-fields-wrapper、::-webkit-datetime-edit-hour-field、::-webkit-datetime-edit-text、::-webkit-datetime-edit-minute-field等。

移动端

在移动端，对于时间选择输入框，设备会在系统层面实现更利于移动端交互的效果，我个人的建议是可以不做UI的美化处理的，例如在iOS系统下，显示的时间选择列表和iOS的时间选择的UI和交互是一脉相承的，效果更好。

不过，移动端也有其他的小瑕疵，按照我之前开发的经验，在iOS Safari浏览器下，min max属性似乎不能对范围进行限制。

这就导致最终表单数据提交的时候，需要做下验证。

结语

学习小天地，记录下近期学到的些东西，一来备忘，二来可能可以帮到有需要的人。

感谢您的阅读与支持，比心！

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。

本文地址：https://www.zhangxinxu.com/wordpress/?p=9906

(本篇完)