HTML <input type="time">: 시간 선택

HTML <input type="time">: 시간 선택

time 유형의 <input> 요소는 사용자가 시간을 선택할 수 있는 컨트롤입니다. 입력 컨트롤의 외형은 브라우저와 운영체제에 따라 다릅니다. 값은 hh:mm 또는 hh:mm:ss 형식으로 정규화됩니다.

<label for="time">일정의 시작 시간을 선택하세요:</label>
<input type="time"
       id="time"
       max="18:00"
       min="09:00"
       step="3600">
input {
  margin-top: 0.4rem;
}

불러오는 중...

time 유형의 value 특성은 24시간 형식의 hh:mm, 초 단위 포함 (step 특성 사용하기를 참고하세요) 시 hh:mm:ss여야 합니다.

JavaScript에서는 HTMLInputElementvalue로 값을 가져올 수 있습니다.

const dateControl = document.querySelector('input[type="time"]')
dateControl.value = '15:30'
console.log(dateControl.value) // '15:30'

다른 대부분의 데이터 유형과 달리, 시간은 주기적 도메인(periodic domain)입니다. 즉, 값이 최대치에 도달하면 처음으로 돌아가 최소치와 같아집니다. 예를 들어 min=14:00이고 max=02:00time 입력 칸에서 유효한 시간 값은 오후 2시부터 시작해 자정을 거쳐 오전 2시까지입니다.

추가 특성

time 유형은 모든 <input> 요소가 공유하는 특성 외에도 아래의 특성을 추가로 지원합니다.

max

선택할 수 있는 시간의 최대 한계입니다. 입력한 값이 이 시간 이후인 경우 제약 검증에 실패합니다. max 특성은 반드시 에서 설명한 올바른 형식의 시간 문자열이어야 합니다. 유효하지 않은 값을 입력하면 최대 한계를 지정하지 않은 것으로 취급합니다.

min

선택할 수 있는 시간의 최소 한계입니다. 입력한 값이 이 시간 이후인 경우 제약 검증에 실패합니다. min 특성은 반드시 서 설명한 올바른 형식의 시간 문자열이어야 합니다. 유효하지 않은 값을 입력하면 최대 한계를 지정하지 않은 것으로 취급합니다.

step

선택 가능한 값의 간격입니다. 숫자 또는 any를 지정할 수 있습니다. 간격에 맞는 날짜만 선택할 수 있습니다. 간격의 시작점은 min 특성이 존재하면 min, value가 존재하면 value, 둘 다 존재하지 않으면 00:00입니다.

숫자를 지정할 경우, 수의 단위는 1초입니다. step의 기본 값은 60이므로 기본 간격은 1분입니다. any를 지정하거나 특성을 누락할 경우 60을 지정한 것과 같습니다.

유효성 검증

time 유형의 기본 설정에서는 값의 형식만 검증합니다. 브라우저 기본 인터페이스에 유효하지 않은 형식의 값을 입력할 수 없다는 점은 유용합니다.

minmax 특성으로 선택 가능한 시간을 제한하는 경우, 범위를 벗어난 값을 제출하려고 하면 오류를 표시합니다.

required 특성으로 날짜를 반드시 입력하게 설정할 수 있습니다. 사용자가 날짜를 입력하지 않고 양식을 제출하려고 하면 브라우저가 오류를 표시합니다.

클라이언트 사이드 유효성 검증은 서버에서의 검증을 대체할 수 없습니다. HTML을 직접 수정할 수도 있고, 아예 양식을 우회하여 서버에 직접 값을 제출하는 것도 가능합니다. 서버가 값을 올바르게 검증하지 못한 경우 망가졌거나 지나치게 큰 데이터로 인해 장애가 발생할 수 있습니다.

예제

step 특성 사용하기

step 특성을 사용하면 사용자가 키보드 위와 아래 화살표 키 등을 사용해 시간 값을 올리거나 내릴 때 변경되는 간격을 조절할 수 있습니다.

step의 기본 값은 60, 즉 1분입니다. 기본 값에서 대부분의 사용자 에이전트는 시와 분 선택 UI만 표시하고 초는 표시하지 않습니다. step 특성을 60의 배수가 아닌 수로 지정하면 초가 표시됩니다.

<label for="time">일정의 시작 시간을 선택하세요:</label>
<input type="time"
       id="time"
       max="18:00"
       min="09:00"
       step="10">

선택 가능한 시간 범위 제한하기

minmax 특성을 지정하면 사용자가 선택할 수 있는 시간을 특정 범위로 제한할 수 있습니다. 이 예제에서는 08시부터 12시까지의 시간만 선택할 수 있도록 입력 범위를 제한합니다.

<label>출근일을 선택하세요:
  <input type="time" name="schedule" min="08:00" max="12:00" />
</label>

불러오는 중...

명세

HTML Standard

브라우저 호환성

MDN browser-compat-data
데스크톱모바일
iOSAndroid
SafariChromeFirefoxSafariChromeFirefoxSamsung Internet
type="time"

같이 보기

마지막 수정:

CC BY-SA 4.0 unless otherwise noted. See LICENSE.