删除 Chrome input=time 中的秒数答案

【问题标题】：Remove seconds in Chrome input=time删除 Chrome input=time 中的秒数
【发布时间】：2012-10-28 13:04:40
【问题描述】：

在 Chrome 的最后一次更新中（在我的例子中是“23.0.1271.64 m”），input=time 现在似乎包含了不活动且不可点击的秒数。这在我们的网站上看起来不太好，所以我想知道是否有人找到了删除秒数的方法。不幸的是 jsfiddle 已关闭，我无法在此处发布示例，但我将其发布在这里，以便人们无论如何都可以阅读它。

<html>
<head></head>
<body>
    <input type="time" value="00:44" name="tiiiiden"/>
</body>
</html>

由于秒只是“躺在那里”并且不可编辑，因此这可能是一个错误，很快就会修复。

【问题讨论】：

标签： google-chrome time input webkit

【解决方案1】：

我遇到了同样的问题，如果您使用预先填充的日期来填写您的输入，只需使用这个：

var myDate = new Date();
myDate.setSeconds(0);
myDate.setMilliseconds(0);

输入标签如下：

<input type="datetime-local" step="60"/>

我个人使用 Angular，但由于 Date 是 Javascript，任何东西都应该可以工作。

【讨论】：

更短的你可以做myDate.setSeconds(0,0);

【解决方案2】：

我们正在使用 moment.js 来解决这个问题。您可以通过在控制器上设置以下内容来舍入秒数以避免在预填充输入时间内出现 milis：

const localDate = moment(data.date).startOf('minute').toDate();

希望对你有帮助；）

【讨论】：

【解决方案3】：

@hend 将step 设置为 60 的解决方案适用于空输入，但如果您使用预先填充的值加载表单，您会发现秒数可能会重新出现在禁用状态。

您可以使用以下 CSS 屏蔽它们和悬空冒号：

  ::-webkit-datetime-edit-second-field {
    background: $color-white;
    color: transparent;
    margin-left: -3px;
    position: absolute;
    width: 1px;
  }

产生以下结果：

【讨论】：

chrome 中有悬空冒号
Chrome 自此答案以来已更新多次。您的最终样式块可能会根据您的特定用例而有所不同。这个例子只是一个起点。
如何隐藏那个冒号？
这将隐藏秒 - 但如果你点击时钟图标，你会得到 3 个数字（h、m、s）仍然提示

【解决方案4】：

我知道这是一个非常古老的问题，但我刚刚找到了解决方案。

您必须将步数更改为 60。如果您保留步数默认值 (1)，则必须增加一秒，因此必须在字段中显示秒数。

如果你设置你的步数为60，它会增加1分钟，所以不需要显示秒数。

【讨论】：

似乎不适用于 Android 4.4 / Chrome 30 webview / 美国语言环境
看来这是a bug in Android Chrome 已在 Chrome 43 中解决

【解决方案5】：

Android Chrome 和 Webbrowser 仍然存在这个问题，所以我使用 angularjs 做了一个针对智能手机的解决方法：

http://jsfiddle.net/Rvjuf/12/

它是如何工作的：

有 2 个元素可以处理这个问题：

<span>{{ timeDisplay }}</span>
<input type="time" ng-model="time">

在链接代码中，为元素设置样式（CSS文件中也可以），并绑定到span的点击：

        scope.inputElement.css({
            position: "absolute",
            "z-index": "-10000",
            opacity: 0
        });
        scope.displayElement.css({
            width: "200px",
            height: "20px",
            background: "blue",
            color: "white",
        });
        scope.displayElement.bind("click", function(event) {
            scope.inputElement[0].focus();
            scope.inputElement[0].click();
        });

然后，为时间值注册一个更改监听器并更新 timeDisplay 变量：

        $scope.$watch('time', function(nv, ov) {
            var parts = nv.split(" ")[0].split(":");
            var hours = parts[0];
            var minutes = parts[1];
            $scope.timeDisplay = $filter('date')(new Date(2014, 03, 06, hours, minutes, 0), "H:mm");
        });

因此，当用户点击跨度时，输入要么被聚焦，要么被点击（iOS 和 ANDROID 在那里有所不同），从而导致原生时间选择器 UI 出现。

【讨论】：

【解决方案6】：

如果不需要，OSX 和 Linux 上的 Chrome 23 stable 会省略 seconds 字段，Windows 上的 Chrome 24 beta 也会省略它。我建议您等待 Chrome 24 稳定版本。

【讨论】：

【解决方案7】：

我找不到与 form input 类型的任何更改相关的 23.0.1271.64 m 的任何更改/发行说明，但根据 W3C 的 HTML5 markup documentation 的最新工作草案 input type="time" 元素确实不支持除“RFC 3339中定义的有效部分时间”以外的任何其他时间格式，即hh:mm:ss.ff 和hh:mm:ss。

由于没有属性可以在input elements 中的任何一个日期/时间上指定您自己的日期/时间格式，因此您无法使用定义的格式。

来自input type=time – time input control

值：[RFC 3339] 中定义的有效部分时间。
示例：
23:20:50.52
17:39:57

来自RFC 3339

时间-secfrac = "." 1*数字
partial-time = time-hour ":" time-minute ":" time-second [time-secfrac]

最后，我附上一张 Chrome 23.0.1271.64 m 如何呈现不同时间格式的屏幕截图（在我的机器上）；

<input type="time" value="23:20:50.52" />
<input type="time" value="17:39:57" />
<input type="time" value="13:37" />
<input type="time" value="" />

标记也可通过jsFiddle 获得。

【讨论】：

Chrome 中似乎存在一个错误，如果时间字段有秒数则无法提交（请参阅here）。

【解决方案8】：

遇到同样的问题。我使用white-space: nowrap 和overflow: hidden 的固定宽度来隐藏秒数，但是当输入集中时问题仍然存在。

【讨论】：