Chrome 입력[type=date] 에 관한 빠른 FAQ

키타무라 에이지
키타무라 에이지

  • 이 도움말은 Chrome 소프트웨어 엔지니어 Kent Tamura가 작성했습니다.

이미 알고 계시겠지만 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 의사 클래스 선택기를 사용하여 양식 컨트롤의 스타일을 지정하는 방법을 제공했습니다. 그러나 캘린더 팝업은 WebKit에서 이러한 방법을 제공하지 않습니다. <select>의 팝업 메뉴와 같이 문서와 별개이며 현재 하위 요소의 스타일 지정을 제어하는 표준이 없기 때문입니다.

jQuery 날짜 선택기와 기본 날짜 선택 도구 간의 충돌을 방지하려면 어떻게 해야 하나요?

Chrome의 input[type=date]에서 jQuery Datepicker를 사용해 본 경우 jQuery UI와 기본 캘린더 팝업의 캘린더가 겹쳐지는 것을 발견할 수 있습니다. jQuery 날짜선택기를 모든 플랫폼에 적용하려면 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();