Удаление секунд в Chrome input = время

В последнем обновлении Chrome ("23.0.1271.64 м" в моем случае) кажется, что input = time теперь включает секунды, которые неактивны и не доступны для кликов. Это не выглядит красиво на нашем сайте, поэтому я хочу знать, нашел ли кто-нибудь способ удалить секунды. К сожалению, jsfiddle не работает, и я не могу опубликовать пример, но я размещаю его здесь, чтобы люди могли его прочитать.

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

Поскольку секунды только "лежат там" и не редактируются, возможно, что это ошибка, и она будет исправлена довольно скоро.

Ответ 1

Устойчивый Chrome 23 на OSX и Linux пропускает поля секунд, если это не нужно, а бета-версия Chrome 24 в Windows также опускает его. Я рекомендую вам ждать стабильной версии Chrome 24.

Ответ 2

Я знаю, что это очень старый вопрос, но я нашел решение.

Вы должны изменить свой шаг на 60. Если вы оставите свой шаг по умолчанию (1), он должен будет увеличиться на одну секунду, поэтому он должен показывать секунды в поле.

Если вы установите свой шаг на 60, он будет увеличиваться на 1 минуту за раз, поэтому ему не нужно показывать секунды.

Ответ 3

Я не мог найти примечания об изменениях и 23.0.1271.64 m для 23.0.1271.64 m которые относятся к любым изменениям типов input form но согласно последнему рабочему черновику документации по разметке HTML5 по W3C элемент input type="time" не поддерживает никаких другой формат времени, чем "действительное частичное время, определенное в RFC 3339 ", и это hh:mm:ss.ff и hh:mm:ss.

Поскольку нет атрибута для указания вашего собственного формата даты и времени ни на одном из элементов input даты/времени, вы застреваете с определенными форматами.

Из типа ввода = управление временем - время

Значение: действительное частичное время, определенное в [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]

Наконец, я Chrome 23.0.1271.64 m скриншот о том, как 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.

Ответ 4

Имеет ту же проблему. Я использовал фиксированную ширину с white-space: nowrap и overflow: hidden чтобы скрыть секунды, но когда вход сфокусирован, проблема остается.

Ответ 5

У 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 делают там какую-то разницу), вызывая появление пользовательского интерфейса пользовательского времени.

Ответ 6

@hend решение step настройки на 60 работает на пустой ввод, но если вы загрузите форму с предварительно настроенными значениями, вы обнаружите, что секунды могут появиться в отключенном состоянии.

Вы можете замаскировать их и оборванный двоеточие с помощью следующего CSS:

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

Это дает следующее:

Ответ 7

Мы используем moment.js, чтобы исправить это. Вы можете округлить секунды, чтобы избежать milis в предварительно настроенном времени ввода, установив на контроллер:

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

Я надеюсь, что это помогает ;)

Ответ 8

У меня была такая же проблема, если вы используете заполненную дату до заполнения, просто используйте это:

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

С помощью тега ввода:

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

Я лично использую угловой, но что-то должно работать, поскольку Date - это Javascript.