HTML5 и затраты времени показывает 12 часов

по HTML5 черновикам,input type=time создает элемент управления для ввода времени суток, который, как ожидается, будет реализован с использованием "предпочтительной презентации пользователя". Но это действительно означает использование виджета, где представление времени следует правилам браузере локаль. Таким образом, независимо от языка окружающего контента представление зависит от языка браузера, языка базовой операционной системы или общесистемных языковых настроек (в зависимости от браузера). Например, используя финскую версию Chrome, я вижу, что виджет использует стандартные 24-часовые часы. Ваш пробег будет меняться.

таким образом, input type=time основаны на идее локализации, которая берет все это из рук автора страницы. Это намеренно; проблема поднималась в дискуссиях HTML5 несколько раз, с тем же результатом: никаких изменений. (За исключением, возможно, добавленных разъяснений к тексту, что делает это поведение описанным как предназначенный.)

отметим, что pattern и placeholder атрибуты не допускается input type=time. И placeholder="hrs:mins", если бы это было реализовано, было бы потенциально вводить в заблуждение. Вполне возможно, что пользователь должен ввести 12.30 (с периодом), а не 12:30, когда используется локаль браузера ".- как разделитель во времена.

мой вывод заключается в том, что вы должны использовать input type=text С pattern атрибут и с некоторым JavaScript, который проверяет правильность ввода в браузерах, которые не поддерживают элемент pattern атрибут изначально.

его зависит от настроек локального системного времени, сделать 24 часа, то он покажет вам 24 часа времени.

Это зависит от формата времени операционной системы пользователя когда веб-браузер был запущен.

Так:

• если системные префы вашего компьютера настроены на использование 24-часовых часов, браузер отобразит <input type="time"> элемент --:-- (диапазон времени: 00:00-23:59).
• если вы измените системные префы вашего компьютера для использования 12-часового, выход не изменится, пока вы не выйдете и не перезапустите браузер. Затем он изменится на --:-- -- (время диапазон: 12: 00 AM-11: 59 PM).

и (на момент написания этой статьи), поддержка браузеров составляет всего около 75% (caniuse). Yay: Edge, Chrome, Opera, Android. Boo: IE, Firefox, Safari).

поддержка этого типа все еще очень бедна. Опера показывает это так, как вы хотите. Chrome 23 показывает его с секундами и AM/PM, в версии 24 (dev branch на данный момент) он избавится от секунд (если это возможно), но никакой информации о AM / PM.
Это не хочет, чтобы вы, возможно, хотите, но на данный момент единственный вариант, который я вижу для достижения вашего формата выбора времени, - это использование javascript.

Если вы можете / готовы использовать крошечный компонент я написал этот Timepicker -https://github.com/jonataswalker/timepicker.js - для моих собственных нужд.

использование выглядит так:

var timepicker = new TimePicker('time', {
  lang: 'en',
  theme: 'dark'
});

var input = document.getElementById('time');

timepicker.on('change', function(evt) {
  
  var value = (evt.hour || '00') + ':' + (evt.minute || '00');
  evt.element.value = value;

});

body {
  font: 1.2em/1.3 sans-serif;
  color: #222;
  font-weight: 400;
  padding: 5px;
  margin: 0;
  background: linear-gradient(#efefef, #999) fixed;
}
input {
  padding: 5px 0;
  font-size: 1.5em;
  font-family: inherit;
  width: 100px;
}

<script src="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>
<link href="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet"/>

<div>
  <input type="text" id="time" placeholder="Time">
</div>

HTML предоставляет только input type="time" Если вы используете bootstrap, то вы можете использовать timepicker. вы можете получить код из этого URL http://jdewit.github.io/bootstrap-timepicker может быть, это поможет вам

несмотря на то, что вы видите время в формате HH:MM AM/PM, на бэкэнде он все еще работает в 24-часовом формате, вы можете попробовать использовать некоторые базовые javascript, чтобы увидеть это.

вы можете попробовать это html сторона

<label for="appointment-time">Choose Time</label>
<input class="form-control" type="time" ng-model="time" ng-change="ChangeTime()" />
<label class="form-control" >{{displayTime}}</label>

JavaScript Side

function addMinutes(time/*"hh:mm"*/, minsToAdd/*"N"*/) 
{
        function z(n)
        {
           return (n<10? '0':'') + n;
        }
        var bits = time.split(':');
        var mins = bits[0]*60 + (+bits[1]) + (+minsToAdd);
        return z(mins%(24*60)/60 | 0) + ':' + z(mins%60); 
 }  

 $scope.ChangeTime=function()
 {
      var d = new Date($scope.time);
      var hours=d.getHours();
      var minutes=Math.round(d.getMinutes());
      var ampm = hours >= 12 ? 'PM' : 'AM';
      var Time=hours+':'+minutes;
      var DisplayTime=addMinutes(Time, duration);
      $scope.displayTime=Time+' - '+DisplayTime +' '+ampm;
 }