정의 및 사용 방법

<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 속성

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

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

주의할 점

브라우저에서 제공하는 기본 UI에서는, 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와 같은 값도 입력할 수 있는 경우가 있을 수 있습니다.

실제 적용된 모습

브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 날짜와 시간이 지정된 최소 날짜와 시간 이전인지 아닌지 유효성 검사를 시행합니다.

max 속성

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

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

주의할 점

브라우저에서 제공하는 기본 UI에서는, 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와 같은 값도 입력할 수 있는 경우가 있을 수 있습니다.

실제 적용된 모습

브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 날짜와 시간이 지정된 최대 날짜와 시간 이후인지 아닌지 유효성 검사를 시행합니다.

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>
브라우저에서 실제 표시된 모습 아무 날짜도 선택하지 않고 '제출'버튼을 클릭해보세요!
브라우저가 필수 입력에 대한 오류 메시지를 표시하는 것을 확인할 수 있습니다.

name 속성

name 속성은 해당 요소의 이름을 나타냅니다.
name 속성이 지정되어 있으면, 그 값을 참조하여 폼 제출 시 전송되는 데이터의 이름으로 사용됩니다. 자바스크립트에서도 name 속성의 값을 참조하여 해당 요소의 form.elements API의 이름으로 사용됩니다.

접근성 고려 사항

<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)

참고문헌

같이 보기