datetime

정의 및 사용

datetime type은 시간(time), 날짜(date), 월(month), 년도(year)를 선택하기 위한 새로운 html5 input type 이다. 이 때 시간은 UTC(Universal Time Coordinated, 협정시계시, 국제적인 표준시)기준이다.

브라우저 지원

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

현재 오페라 9.0 이상(달력/시간 폼 지원), 크롬 10.0 이상(달력/시간 폼 미지원)에서만 지원한다.

구문

속성 값 설명
설명
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 : 아직 달력과 시간 선택 폼을 지원하지 않아 바로 input 창에 텍스트를 입력할 수 있으며, 잘못된 형식을 적을 경우 유효하지 않음을 알려준다. 직접 폼에 날짜와 시간을 입력할 경우 협정 시계시 표준 규격에 맞게 yyyy-mm-ddT00:00Z 형식으로 적어야 한다.
  • Opera : 현재 자동으로 달력 선택창과 시간 폼을 지원하는 유일한 브라우저이며, 폼을 클릭하고 날짜를 선택하면 된다. 그리고 시간 폼 뒤에 자동으로 UTC글자가 나타난다.

목록 으로

댓글