"input type=time"과 "input type=text + timepicker"의 동작 차이

3189 단어 HTML5timePickerjQuery

했던 일



모처럼 HTML의 디폴트로 「input type=time」이 준비되어 있기 때문에, 가능하면 사용하고 싶다.
input type=text + timepicker와의 동작 차이를 확인한다.

결론



input type=text + timepicker 쪽이 이하의 관점에서 좋다.
  • 「input type=time」은 브라우저에 의해 묘화·거동이 다르다(참조 사이트 확인)
  • 요청의 내용은 동일하므로 어느 쪽이든 좋다

  • 환경


  • jQuery3.5.1
  • timepicker1.13.14
  • Chrome85.0.4183.83

  • 구현



    xxx.html
    <input type="time" class="ddd" name="bbb" value="12:30">
    <input type="text" class="aaa" name="ddd" value="11:30">
    <script type="text/javascript">
    $(function () {
        $('.text').timepicker({'timeFormat': 'H:i'});
    });
    

    표시(왼쪽: time, 오른쪽: text(timepicker))



    아무것도 CSS를 맞추지 않은 상태.
    Chrome의 경우 time에는 시계 아이콘이 표시됩니다.
    개인적으로는 어느 쪽이라도 좋을까라는 느낌.


    time 선택 화면



    시분을 따로따로 선택하는 것은 귀찮지 않아?
    1분 단위로 선택하고 싶은 경우는 이쪽이 좋은 경우 있는 것인가.
    이번에는 30분 단위로 선택하고 싶었지만, 원래 step이 잘 되지 않았다.


    text(timepicker) 선택 화면



    한 번의 클릭으로 선택할 수 있습니다.
    단지 1분 단위라든가 되면 조금 스크롤이 귀찮을지도.


    POST 데이터



    둘 다 동일합니다.


    참조

    좋은 웹페이지 즐겨찾기