Недействительные значения времени ввода типа HTML5

У меня есть форма с временем ввода. Я пытаюсь установить значения. Но это не видно. Вот мой код.

<input type="time" name="exit" id="teacher-entry-exit-form-exit-input" class="form-control" value="08:56 AM" required="">

Что я делаю неправильно?

Ответ 1

Это основано на 24-часовом времени, поэтому используйте value="08:56" для AM и value="20:56" для PM.

Пример здесь

<input type="time" value="08:56">

Смотрите: http://www.w3.org/TR/html-markup/input.time.html

Ответ 2

Стивен, Гири, все, что вам нужно сделать, чтобы установить AM/PM, - это преобразовать вашу 12-часовую строку времени в 24-часовую, прежде чем передать ее в атрибут значения input [type = time].

Вот быстрый пример того, как преобразовать 12-часовую → 24-часовую строку времени.

const am_pm_to_hours = time => {
    let hours = Number(time.match(/^(\d+)/)[1]);
    let minutes = Number(time.match(/:(\d+)/)[1]);
    const AMPM = time.match(/\s(.*)$/)[1];
    if (AMPM.toLowerCase() === "pm" && hours < 12) hours = hours + 12;
    if (AMPM.toLowerCase() === "am" && hours == 12) hours = hours - 12;

    let sHours = hours.toString();
    let sMinutes = minutes.toString();
    if (hours < 10) sHours = "0" + sHours;
    if (minutes < 10) sMinutes = "0" + sMinutes;

    return '${sHours}:${sMinutes}';
}

надеюсь это поможет :)