소개

이번에는 HTML5의 캘린더 UI를 브라우저끼리 비교해 갑니다.

HTML5 표준 캘린더란?

HTML5에서는 다음 양식 컨트롤이 새로 추가되었습니다.
이것은 날짜 입력을 위한 텍스트 상자입니다.

날짜 입력을 위한 텍스트 상자

<INPUT type="date">

MDM 웹 문서에 따르면,

date 형의 요소는, 내용을 자동적으로 검증하는 텍스트 박스 또는 특수한 일자 선택 인터페이스를 사용해,
사용자가 날짜를 입력하게 하는 입력 필드를 생성합니다. 결과 값에는 연도, 월, 일이 포함되지만 시간은 포함되지 않습니다.
time 및 datetime-local 입력형은 시각이나 일자와 시각의 입력에 대응하고 있습니다.

컨트롤의 사용자 인터페이스는 일반적으로 브라우저에 따라 다릅니다.
현재 대응은 불안정하며 자세한 내용은 브라우저 대응을 참조하십시오.
지원되지 않는 브라우저의 경우 이 컨트롤은 단순하게 격하됩니다.

라는 것이므로, 어떤 표시를 하는지를 비교합니다.

대응 브라우저

대응 브라우저는 이하와 같다.


브라우저
대응


IE 11
×

Microsoft Edge
○

Chrome
○

Firefox
○

Safari
×

사용자 인터페이스

Edge

목록에서 날짜를 선택하고 “✓”를 클릭하면 날짜를 입력할 수 있습니다.

Chrome

캘린더 날짜를 클릭하면 날짜를 입력할 수 있습니다.

Firefox

Chrome과 마찬가지로 캘린더 날짜를 클릭하면 날짜를 입력할 수 있습니다.

소감

너무 UI가 다른 것이 있으므로 UI를 통일하고 싶다면 jQuery DatePicker 등을 사용하면 좋다고 생각합니다.

참고문헌

htps : //에서 ゔぇぺぺr. 모잖아. 오 rg / 그럼 / cs / u b / HTML / 에멘 t / amp t /
htps : //에서 ゔぇぺぺr. 모잖아. 오 rg / 그럼 / 드 cs / u b / HTML / 에멘 t / amp t / 갓 # B 로 wse r_ 코 m 파치비 ty