date

정의 및 사용

date type은 날짜(date), 월(month), 년도(year)를 선택하기 위한 새로운 html5 input type 이다.

브라우저 지원

IE6  지원안함IE7  지원안함IE8  지원안함Chrome 지원Firefox 지원안함Opera 지원Safari 지원

현재(2013.03.04) 오페라 12.0 이상(달력 팝업창 지원), 크롬 25.0 이상(달력 팝업창 지원), 사파리 5.1.7 이상(달력 팝업창 미지원)에서 지원한다.

구문

속성 값 설명
설명
name ..
disabled 비활성화 시키기 – 해당 요소를 사용하지 않게 제어할 수 있다. disabled 값을 적으면 마우스 클릭이나 탭키가 작동되지 않는다.
form [NEW]
autocomplete [NEW] 자동완성기능 제어 – 이전에 입력했던 내용을 힌트로 보여준다. autocomplete 기능이 생기면서 웹에서도 자동완성기능을 제어할 수 있다.
autofocus [NEW] 입력 필드에 커서 표시하기 – 페이지가 로딩되면 바로 커서가 표시되어 편리하게 이용할 수 있다. 그러나 placeholder기능과 중복되서 사용할 수는 없다.
list [NEW]
max [NEW] 해당 폼에서 사용 가능한 최대값을 설정한다.
min [NEW] 해당 폼에서 사용 가능한 최소값을 설정한다.
readonly ..
required [NEW] 필수입력필드 체크 속성- 서버로 폼을 전송하기 전에 필수 내용들이 모두 채워졌는지를 검사한다.
step [NEW] 해당 폼에서 사용 가능한 숫자의 간격을 설정한다. 예를 들어 “step=3″이라고 지정하면 3,6,9…의 숫자가 선택 가능하다.
value 처음 폼이 로딩될 때 기본값으로 주어지는 숫자를 결정한다.

예제

버그 및 이슈

  • html5의 input type 속성은 현재에도 계속 각 브라우저 벤더들이 업데이트를 하고 있으므로, 주기적으로 업데이트 내용을 확인해야 한다.
  • Chrome : 달력 팝업 창을 지원하며, 직접 폼에 날짜를 입력할 경우 yyyy-mm-dd 형식으로 적어야 한다.
  • Opera : 달력 팝업 창을 지원하며, input 폼을 클릭하면 자동으로 창이 뜬다.
  • Safari : 달력 팝업 창은 아직 지원하지 않지만 date 폼에서 오늘 날짜가 자동 입력되며 화살표로 변경 가능하다.

목록 으로

  • 달바라기

    2013년 2월 7일, 9:27 오후

    [답변]

    사파리 5.1.7에서 테스트 결과.. 지원 합니다.
    달력창은 뜨지 않으며, 내용은 수기 편집이 되고, 단순히 우측 끝에 상하 버튼으로 날짜 변경만 가능하네요. 만약 형식이 일치 하지 않으면 오늘 날짜를 돌려 줍니다

    • kiris

      2013년 3월 4일, 3:35 오후

      [답변]

      달바라기님. 정보 감사합니다. 말씀하신 대로 사파리 브라우저 지원 현황 업데이트 하였습니다. :)

댓글