html5 시간 입력은 12 시간을 표시합니다.

html5 시간 입력은 12 시간을 표시합니다.

---

.NET과 함께 html 5 입력 요소를 사용하고 type=time있습니다. 문제는 시간 12 hours을 보여 주지만 24 hours하루 만에 보여주고 싶다는 것 입니다. 24 시간까지 어떻게 할 수 있나요? 여기 내 입력 필드입니다

<input type="time" name="time" placeholder="hrs:mins" pattern="^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$" class="inputs time" required>

데모

여기 jsfiddle입니다

---

HTML5 시간 입력

이것은 날짜 / 시간 관련 유형 중 가장 간단한 것으로, 사용자가 오전 또는 오후가 아닌 24 시간 시계 에서 시간을 선택할 수 있습니다. 반환 된 값은 시간 : 분이며 14:30과 유사합니다.

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

---

이 기능은 아직 초안입니다. 브라우저마다 다르게 표시됩니다.

-Opera (Presto Engine)는 올바른 방법을 보여줍니다.
-Chrome (Webkit Engine)은 AM / PM으로 표시합니다.
-Firefox (Gecko Engine)는 아무것도 표시하지 않지만 유효성을 검사합니다.
-Edge는 팝 오버 유형 창에 필요한 모든 값을 표시합니다.

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

사용하기에 좋은 생각이 아닙니다!

---

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속성과 일부 자바 스크립트와 그 체크를 지원하지 않는 브라우저에 대한 정확성에 대한 입력 pattern기본적 속성을.

---

로컬 시스템 시간 설정에 따라 24 시간을 설정하면 24 시간 시간이 표시됩니다.

---

웹 브라우저가 시작되었을 때 사용자 운영 체제의 시간 형식에 따라 다릅니다 .

그래서:

• 컴퓨터의 시스템 환경 설정이 24 시간제를 사용하도록 설정된 경우 브라우저는 <input type="time">요소를 --:--(시간 범위 : 00 : 00–23 : 59) 로 렌더링합니다 .
• 12 시간을 사용하도록 컴퓨터의 시스템 환경 설정을 변경하면 브라우저를 종료하고 다시 시작할 때까지 출력이 변경되지 않습니다. 그런 다음 --:-- --(시간 범위 : 12:00 AM – 11:59 PM)로 변경됩니다.

그리고 (이 글을 쓰는 현재) 브라우저 지원은 약 75 %에 불과합니다 ( caniuse ). 예 : Edge, Chrome, Opera, Android. Boo : IE, Firefox, Safari).

---

작은 구성 요소를 사용할 수 있거나 사용하려는 경우이 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>

---

이 유형의 지원은 여전히 ​​매우 열악합니다. Opera는 원하는 방식으로 보여줍니다. Chrome 23은 초 및 AM / PM으로 표시하며 24 버전 (현재 개발 브랜치)에서는 초 (가능한 경우)를 제거하지만 AM / PM에 대한 정보는 없습니다.
원하는 것은 아니지만이 시점에서 시간 선택기 형식을 달성하는 유일한 옵션은 자바 스크립트를 사용하는 것입니다.

---

HTML은 input type="time"부트 스트랩을 사용하는 경우 에만 제공되며 timepicker를 사용할 수 있습니다. 이 URL http://jdewit.github.io/bootstrap-timepicker에서 코드를 얻을 수 있습니다 당신을 도움이 될 수 있음

---

Even though you see the time in HH:MM AM/PM format, on the backend it still works in 24 hour format, you can try using some basic javascript to see that.

---

I know this question has been answered many times, I just propose to people that might be interested a jquery Plugin :

https://github.com/fenix92/clickClock

very basic, clear and intuitive.

(demo : http://www.clamart-natation.com/clickclock/)

---

you can try this for html side

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

---

Simple HTML trick to get this :

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 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>

참고URL : https://stackoverflow.com/questions/13523060/html5-time-inputs-shows-12-hours