18

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

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

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

4

8 回答 8

22

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

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

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

于 2015-03-09T12:02:06.667 回答
5

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

在此处输入图像描述

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

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

产生以下结果：

在此处输入图像描述

于 2017-02-08T18:12:22.617 回答
4

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

于 2012-11-09T06:20:45.507 回答
4

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

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

从输入类型=时间-时间输入控制

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

来自RFC 3339

时间-secfrac = "." 1*DIGIT
部分时间 = 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 获得。

于 2012-11-08T20:27:05.807 回答
2

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

于 2012-11-08T13:45:58.757 回答
2

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

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

使用这样的输入标签：

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

我个人使用角度，但任何东西都应该工作，因为 Date 是 Javascript。

于 2017-08-14T10:26:58.033 回答
1

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

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

这个怎么运作：

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

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

于 2014-03-06T14:35:36.133 回答
0

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

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

我希望它有帮助；）

于 2017-05-16T13:51:05.127 回答