정의 및 사용 방법

<input> 태그의 type="datetime-local"은
사용자가 날짜와 시간을 한 번에 쉽게 입력할 수 있도록 날짜와 시간 선택 인터페이스를 제공하는 입력 필드를 나타냅니다.

브라우저가 제공하는 달력과 시간 선택 도구를 통해서 사용자가 선택한 연도, 월, 일, 시, 분을 쉽게 입력받을 수 있습니다.

기본 예제

HTML 
<label for="user-datetime">날짜와 시간 선택</label>
<input type="datetime-local" id="user-datetime">
실제 적용된 모습

날짜와 시간 선택 인터페이스는 브라우저와 운영 체제에 따라 다르게 표시될 수 있습니다. 하지만, 기능은 동일합니다.

입력되는 날짜와 시간 형식은 어떻게 되나요?

YYYY-MM-DDThh:mm
2024-12-10T15:30
2024년 12월 10일 15시 30분

이 형식은 날짜 형식인 YYYY-MM-DD(예: 2024-12-10)와 시간 형식을 알리는 구분 문자인 T 그 다음으로 24시간 형식인 hh:mm(예: 15:30)으로 구성됩니다.
이 형식은 국제 표준 ISO 8601에 따라 날짜와 시간을 함께 일관되게 표현합니다.

예제

  • 2013년 05월 13일 09시 12분(2013-05-13T09:12)
  • 2025년 01월 01일 02시 22분(2025-01-01T02:22)

초 단위까지 입력된 형식

추가적으로 초(seconds) 단위까지 입력하고 싶다면 step 속성을 사용하여 YYYY-MM-DDThh:mm:ss 형식으로 확장할 수 있습니다.

  • 2013년 05월 13일 09시 12분 15초(2013-05-13T09:12:15)
  • 2025년 01월 01일 02시 22분 08초(2025-01-01T02:22:08)

자세한 설명은 입력 필드에 초(seconds)까지 입력하고 싶다면을 참고하세요.

관련 속성 사용하기

<input type="datetime-local">의 관련된 속성에 대해 알아보겠습니다.

step 속성은 사용자가 입력 가능한 시간 간격을 지정합니다. 0보다 큰 정수 또는 값의 간격(step)에 제한이 없음을 의미하는 any를 사용할 수 있습니다.
이 속성으로 지정하는 값이 시간 간격으로 작용합니다. 예를 들어, step="1"은 1초 간격으로 날짜를 조정하며, step="60"으로 설정하면 60초, 즉 1분 간격으로 시간을 선택할 수 있습니다. 아무것도 지정하지 않으면 기본값인 step="60"이 적용됩니다.

브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 시간이 지정된 간격과 일치하는지 유효성 검사를 시행합니다.

다음은 step="120"이 지정된 예제입니다.

HTML 
<label for="user-datetime">날짜와 시간 선택</label>
<input type="datetime-local" id="user-datetime" step="120">

<input type="datetime-local">에서 step="1"은 1초 단위 간격을 의미합니다. 따라서 step="120"은 120초(2분) 단위 간격을 의미하지만, 실제 브라우저의 인터페이스에서는 2분 단위로 정확히 선택할 수 없을 수도 있습니다.

브라우저에서 실제 표시된 모습

대부분의 브라우저는 step 값을 60으로 나누었을 때 나머지가 발생(정수가 아닌 소수 포함)하면 초 단위로, 나머지가 없으면 분 단위로 간격을 제공합니다. 즉, step 값이 60의 배수일 경우 1분 단위로만, 그 외의 경우 1초 단위로만 간격이 설정됩니다. 하지만, 브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 값이 지정된 간격과 일치하는지 유효성 검사를 시행합니다.

선택된 시간이 지정된 간격과 일치하는지 브라우저가 유효성 검사에 시행하는 step 속성의 간격 기준(Step Base)은 다음과 같습니다.
min 속성이 존재하고 그 값에 오류가 없는 경우 그 값을 기준으로 맞춰진 step 속성 값의 간격이 조정됩니다. value 속성이 존재하고 그 값에 오류가 없는 경우 그 값을 기준으로 맞춰진 step 속성 값의 간격이 조정됩니다. 단, 유효한 min이 설정되어 있다면 min 속성의 값을 기준으로 간격이 조정됩니다. min과 value 속성이 모두 없다면 현재 상태(State)에 맞춰 간격이 조정됩니다.

HTML 
<label for="user-time-1">분 단위까지 선택</label>
<input type="datetime-local" id="user-time-1" step="120"> <!-- 120은 60의 배수 -->
<hr>
<label for="user-time-2">초 단위까지 선택</label>
<input type="datetime-local" id="user-time-2" step="1"> <!-- 1은 60으로 나누었을 때 나머지가 발생 -->
실제 적용된 모습
  • 초 단위 입력이 필요하지 않으면 step 값을 60의 배수로 설정하세요.
  • 초 단위 입력이 필요하면 step 값을 60으로 나누었을 때 나머지가 발생하도록 설정하세요.

value 속성

value 속성은 초깃값을 설정합니다.
이 값은 페이지 로드 시 필드에서 선택된 날짜와 시간을 지정합니다.

날짜와 시간은 YYYY-MM-DDThh:mm 형식으로 입력해야 합니다. 초 단위까지 설정하려면 YYYY-MM-DDThh:mm:ss 형식으로 입력합니다.

HTML 
<!-- 2013년 05월 13일 09시 12분(2013-05-13T09:12) -->
<input type="datetime-local" value="2013-05-13T09:12">
<hr>
<!-- 2013년 05월 13일 09시 12분 05초(2013-05-13T09:12:05) -->
<input type="datetime-local" value="2013-05-13T09:12:05">
실제 적용된 모습

min 속성

선택할 수 있는 허용 가능한 최소 시간을 설정합니다.
이 값은 사용자가 선택할 수 있는 가장 첫 번째 날짜와 시간을 지정합니다.

날짜와 시간은 YYYY-MM-DDThh:mm 형식으로 입력해야 합니다. 초 단위까지 설정하려면 YYYY-MM-DDThh:mm:ss 형식으로 입력합니다.

주의할 점

기본적으로, 브라우저에서 <input type="datetime-local">은 min 속성에 대한 날짜 유효성 검사 기능은 제공하지만, 시간 유효성 검사 기능은 제공하지 않습니다.
즉, 사용자는 min 속성으로 지정한 최소 시간보다 이전의 시간을 입력할 수 있습니다.

다음의 예제로 확인해 보세요.

HTML 
<!-- value: 2013년 05월 13일 09시 12분(2013-05-13T09:12) -->
<!-- min: 2013년 05월 13일 08시 00분(2013-05-13T08:00) -->
<input
    type="datetime-local"
    value="2013-05-13T09:12"
    min="2013-05-13T08:00">

이 속성대로라면 사용자는 08:00 이전의 시간을 선택하거나 입력할 수 없습니다. 그러나, 기본적으로 브라우저에서 시간 유효성 검사는 자동으로 적용되지 않기 때문에 07:15와 같은 값도 입력할 수 있는 경우가 있을 수 있습니다.

실제 적용된 모습

만약 min 속성에 설정된 값을 실제로 검증하고 싶다면, 자바스크립트를 사용하여 입력 값의 유효성 검사를 처리해야 합니다. 중요한 입력이라면 반드시 서버측 언어에서 입력값에 대한 유효성 검사를 추가로 진행해야 합니다.

max 속성

선택할 수 있는 허용 가능한 최대 날짜와 시간을 설정합니다.
이 값은 사용자가 선택할 수 있는 가장 마지막 날짜와 시간을 지정합니다.

날짜와 시간은 YYYY-MM-DDThh:mm 형식으로 입력해야 합니다. 초 단위까지 설정하려면 YYYY-MM-DDThh:mm:ss 형식으로 입력합니다.

주의할 점

기본적으로, 브라우저에서 <input type="datetime-local">은 max 속성에 대한 날짜 유효성 검사 기능은 제공하지만, 시간 유효성 검사 기능은 제공하지 않습니다.
즉, 사용자는 max 속성으로 지정한 최대 시간보다 이후의 시간을 입력할 수 있습니다.

다음의 예제로 확인해 보세요.

HTML 
<!-- value: 2013년 05월 13일 09시 12분(2013-05-13T09:12) -->
<!-- max: 2013년 05월 13일 10시 00분(2013-05-13T10:00) -->
<input
    type="datetime-local"
    value="2013-05-13T09:12"
    max="2013-05-13T10:00">

이 속성대로라면 사용자는 10:00시 이후의 시간을 선택하거나 입력할 수 없습니다. 그러나, 기본적으로 브라우저에서 유효성 검사는 자동으로 적용되지 않기 때문에 11:15와 같은 값도 입력할 수 있는 경우가 있을 수 있습니다.

실제 적용된 모습

만약 max 속성에 설정된 값을 실제로 검증하고 싶다면, 자바스크립트를 사용하여 입력 값의 유효성 검사를 처리해야 합니다. 중요한 입력이라면 반드시 서버측 언어에서 입력값에 대한 유효성 검사를 추가로 진행해야 합니다.

readonly 속성

readonly 속성은 컨트롤을 변경 혹은 편집할 수 없게 만듭니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

주로 value 속성과 함께 사용하여 사용자에게 입력되어 있거나 저장되어 있는 컨트롤의 값을 보여주되 편집할 수 없게 할 때 사용합니다.

하지만, 이 속성은 value를 직접 설정하는 자바스크립트로는 여전히 변경할 수 있습니다.

HTML 
<label for="user-datetime">날짜와 시간 선택</label>
<input type="datetime-local" id="user-datetime" readonly>
실제 적용된 모습

required 속성

required 속성은 폼 제출 시 사용자가 사전에 반드시 날짜와 시간을 선택해야 하는 필수(required) 컨트롤 요소임을 나타냅니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<form>
    <label for="user-datetime">날짜와 시간 선택(*필수)</label>
    <input type="datetime-local" id="user-datetime" required> <!-- 필수 입력 필드로 지정 -->
    <button type="submit">제출</button>
</form>
브라우저에서 실제 표시된 모습 아무 날짜도 선택하지 않고 '제출'버튼을 클릭해보세요!
브라우저가 필수 입력에 대한 오류 메시지를 표시하는 것을 확인할 수 있습니다.

접근성 고려 사항

<input type="datetime-local">을 사용할 때에는 <label>을 함께 사용해야 합니다.
자세한 사항은 <input> 태그의 접근성 고려 사항을 참조하세요.

브라우저 호환성

input type 속성의 datetime-local 값에 대한 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<input type="datetime-local"> 20 12 144 14.1

명세서

input type 속성의 datetime-local 값에 대한 명세서 사양
명세서 사양
<input type="datetime-local"> HTML Standard
#local-date-and-time-state-(type=datetime-local)

참고문헌

같이 보기