Question

在Chrome的上次更新（在我的情况下为“23.0.1271.64 m”）中，输入=时间现在似乎包括无效且无法点击的秒数。这在我们的网站上看起来不太好，所以我想知道是否有人找到了删除秒的方法。不幸的是，jsfiddle失败了，我不能在那里发布一个例子，但我在这里发布，所以人们无论如何都可以阅读它。

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

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

Answer 1

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

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

如果您将步数设置为60，则一次增加1分钟，因此不需要显示秒数。

Answer 2

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

由于没有任何属性可以在日期/时间hh:mm:ss elements中指定您自己的日期/时间格式，因此您无法使用已定义的格式。

来自input type=time – time input control

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

来自RFC 3339

time-secfrac =“。” 1 * DIGIT
partial-time = time-hour“：”time-minute“：”time-second [time-secfrac]

最后，我提供了input如何呈现不同时间格式（在我的机器上）的屏幕截图;

Chrome 23.0.1271.64 m

标记也可在jsFiddle处获得。

Answer 3

在OSX和Linux上稳定的Chrome 23会在没有必要的情况下省略秒数字段，Windows上的Chrome 24 beta也会忽略它。我建议您等待Chrome 24稳定版。

Answer 4

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

Answer 5

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

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

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

产生以下结果：

Answer 6

Android Chrome和Webbrowser仍然存在这个问题，因此我使用angularjs进行了智能手机专用解决方案：

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

工作原理：

有两个元素可以解决这个问题：

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

在链接代码中，设置元素的样式（也可以在CSS文件中执行此操作），并绑定到甚至跨度的单击：

        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出现。

Answer 7

我遇到了同样的问题，如果您使用预先填充的日期来填充您的输入，请使用此功能：

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

使用这样的输入标记：

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

我个人使用角度，但任何事都应该有效，因为Date是Javascript。

Answer 8

我们正在使用moment.js来解决这个问题。您可以通过在控制器上设置：

来舍入秒数以避免在预先填充的输入时间内出现milis

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

我希望它有所帮助;）

删除Chrome input = time中的秒数

8 个答案: