- 이 도움말은 Chrome 소프트웨어 엔지니어 켄트 타무라가 작성했습니다.
이미 알고 계시겠지만 Chrome은 Chrome 20부터 날짜 선택기를 지원합니다. input 요소의 type 속성을 date로 설정하기만 하면 사용자가 화살표 버튼을 클릭하면 Chrome에 멋진 캘린더 위젯이 표시됩니다.
개발자로부터 많은 의견을 받았으므로 이 도움말에서는 날짜 선택 도구를 최대한 활용하는 방법에 대해 몇 가지 사항을 명확히 설명하고자 합니다.
언어는 입력 값의 날짜 형식에 어떤 영향을 미치나요?
사용자는 상자에 날짜 형식이 회색 텍스트로 표시된 input[type=date]의 텍스트 필드에 날짜 값을 입력할 수 있습니다. 이 형식은 운영체제의 설정에서 가져옵니다.
현재 형식을 지정하는 표준이 없으므로 웹 작성자가 날짜 형식을 변경할 방법이 없습니다.
서버로 전송할 때 입력 값은 어떻게 표현되나요?
GET/POST와 같은 HTTP 요청에서 input[type=date]에서 해석된 날짜 값은 yyyy-mm-dd 형식이 됩니다.
입력 값은 어떤 형식으로 반환되나요?
input.value는 프레젠테이션 형식과 관계없이 항상 yyyy-mm-dd로 반환됩니다.
입력 값은 어떤 형식을 허용하나요?
프로그래매틱 방식으로 input.value를 설정하는 경우 초깃값과 자바스크립트에 삽입된 값의 표시 형식과 상관없이 값은 yyyy-mm-dd 스타일만 허용합니다.
날짜 선택 도구의 모양을 변경하려면 어떻게 해야 하나요?
현재는 날짜 선택 도구의 모양에 스타일을 지정할 수 없습니다. WebKit에서는 이전에 -webkit-appearance CSS 속성 또는 ::-webkit-foo 의사 클래스 선택기로 양식 컨트롤의 스타일을 지정하는 방법을 제공했습니다. 하지만 캘린더 팝업은 <select>의 팝업 메뉴와 같이 문서와 별개이므로 WebKit에서 이러한 방법을 제공하지 않으며 현재 하위 요소의 스타일을 제어하는 방법에 관한 표준이 없습니다.
jQuery Datepicker와 네이티브 날짜 선택 도구 간의 충돌을 방지하려면 어떻게 해야 하나요?
Google Chrome의 input[type=date]에서 jQuery Datepicker를 사용해 본 적이 있다면 jQuery UI와 기본 캘린더 팝업이 겹쳐지는 것을 발견했을 수 있습니다.
모든 플랫폼에 jQuery Datepicker를 적용하려면 input[type=date] 대신 input[type=text]를 사용하세요. Chrome뿐만 아니라 iOS Safari, BlackBerry 브라우저, Opera에도 input[type=date]용 자체 UI가 있으며 현재 input[type=date]를 사용하여 모든 플랫폼에서 통합된 UI를 구현할 수 있는 방법은 없습니다.
input[type=date]를 지원하지 않는 플랫폼에서만 jQuery Datepicker를 적용하려면 Modernizr 또는 다음 코드를 사용합니다.
var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}
if (!isDateInputSupported()) // or.. !Modernizr.inputtypes.date
$('input[type="date"]').datepicker();