Входы времени html5 показывают 12 часов

Ответ 1

Ввод HTML5

Это один из самых простых типов, связанных с датой и временем, позволяющий пользователю выбирать время в 24-часовом часе, no AM или PM. Возвращаемое значение - часы: минуты, которые будут выглядеть примерно как 14:30.

<input type="time" name="time" />

Эта функция все еще находится в черновике. Каждый браузер показывает это по-другому.

- Opera (Presto Engine) показывает это правильно.
- Chrome (Webkit Engine) показывает его в AM/PM.
- Firefox (Gecko Engine) ничего не показывает, но проверяет.
- Edge отображает все требуемые значения в окне типа popover

<input type="time" name="time" />

Ответ 2

В черновиках 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 изначально.

Ответ 3

Это зависит от настроек вашего локального системного времени, составляет 24 часа, а затем показывает вам время в 24 часа.

Ответ 4

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

Так:

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

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

Ответ 5

Если вы в состоянии/хотите использовать крошечный компонент, я написал этот 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>

Ответ 6

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

Ответ 7

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

Ответ 8

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

Ответ 9

Я знаю, что на этот вопрос отвечали много раз, я просто предлагаю людям, которые могут быть заинтересованы в плагине jquery:

https://github.com/fenix92/clickClock

очень простой, понятный и интуитивно понятный.

(демо: http://www.clamart-natation.com/clickclock/)

Ответ 10

вы можете попробовать это для 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

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;
 }

Ответ 11

Простой трюк HTML, чтобы получить это:

<link href="#" onclick="location.href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'; return false;" rel="stylesheet"/>
<div class="row" >
                       
                        <div class="col-md-6">
                             <div class="row">
                                <div class="col-md-4" >
                                       <label for="hours">Hours</label>
          <select class="form-control" required>
                <option>  </option>
                <option value="1"> 1 </option>
                <option value="2"> 2 </option>
                <option value="3"> 3 </option>
                <option value="4"> 4 </option>
                <option value="5"> 5 </option>
                <option value="6"> 6 </option>
                <option value="7"> 7 </option>
                <option value="8"> 8 </option>
                <option value="9"> 9 </option>
                <option value="10"> 10 </option>
                <option value="11"> 11 </option>
                <option value="12"> 12 </option>
              </select>
             </div>
                <div class="col-md-4" >
                      <label for="minutes">Minutes</label>
              <select class="form-control" required="">
                <option selected disabled>  </option>
                <option value="00"> 00 </option>
                <option value="10"> 10 </option>
                <option value="20"> 20 </option>
                <option value="30"> 30 </option>
                <option value="40"> 40 </option>
                <option value="50"> 50 </option>
              </select>
             </div>
                 <div class="col-md-4" >
                       <label for="hours">Select Meridiem</label>
              <select class="form-control" required="" >
                <option selected="" value="AM"> AM </option>
                <option value="PM"> PM </option>
              </select>
              </div>
             </div></div>
                    </div>