input type="date"?
이전에 개발자들은 웹 애플리케이션에서 달력을 구현하기 위해서 JQuery UI의 Datepicker 플러그인을 사용해야만 했다.
Datepicker | jQuery UI
Datepicker Select a date from a popup or inline calendar The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (b
jqueryui.com
그러나, 2022년 6월 15일 부로 IE의 서비스가 종료된 시점에서 JS를 사용하지않고 모바일 친화적인 달력 ui를 제공해주는 input의 "date" 타입만으로 이제는 달력 UI를 제공해 줄 수 있게 되었다.
*) input의 date타입은 IE 브라우저에서는 지원 되지 않는다.
<input type="date" />
사용법은 매우 간단하다. 위의 HTML input 태그만으로도 지원이 된다.
크롬브라우저 기준으로 PC에서는 위와 같은 UI로 브라우저에서 지원해주고, value값은 "yyyy-mm-dd" 의 형
식으로 출력된다.
(value값을 원하는 대로 커스터마이징 하기위해선 별도의 자바스크립트 작업이 병행되어야한다.)
모바일 브라우저로 확인시, 사용자의 사용성 측면에서 date타입의 input이 월등하게 좋다는 것을 확인 할 수 있다.
이는 요즘 웹 애플리케이션 점유율 측면에서 모바일기기가 압도적이라는 것을 인지했을때 고려 되어야 할 사항이다.
주요 지원 속성
date 타입은 모든 input 요소가 공유하는 특성외에도 아래와 같은 특성을 추가로 지원한다.
autocomplete
-자동 완성 기능을 제공하는 속성
max
-선택 할 수 있는 날짜의 최대 한계값을 지정 할 수 있는 속성.
-max의 속성값은 반드시 'yyyy-mm-dd' 형식으로 작성된 문자열의 날짜 여야한다.
-max와 min을 모두 지정하는 경우 max는 min과 같은 값이거나 그 이후의 날짜를 가리키는 값이여야한다.
min
-선택할 수 있는 최소한의 날짜 값을 지정 할 수 있는 속성.
-min의 속성값은 반드시 'yyyy-mm-dd' 형식으로 작성된 문자열의 날짜 여야한다.
-max와 min을 모두 지정하는 경우 min은 max와 같은 값이거나 그 이전의 날짜를 가리키는 값이여야한다.
'퍼블리셔 Note > HTML' 카테고리의 다른 글
| [HTML] 유튜브 썸네일 이미지 가져오기 (0) | 2022.05.26 |
|---|---|
| [meta] 모바일 크롬 기반 브라우저에서 url창 영역 색상 바꿔주는 <mete> (0) | 2022.04.11 |
| [HTML] 특정 요소의 범위를 표현할 때 쓰는 'meter' (0) | 2022.03.28 |
| [HTML5]작업의 진행률 표시줄을 나타내는 태그 'progress' (0) | 2022.03.18 |
| [HTML5] 스크립트 없이 동적으로 클릭시 세부 사항을 보여주는 태그 'details' (0) | 2022.03.18 |