HTML DOM Input Datetime type 속성 완벽 정리

HTML DOM의 Input Datetime type 속성은 datetime 타입의 input 요소가 어떤 유형(type)인지 문자열로 반환하거나, 원하는 값으로 설정할 수 있는 속성입니다. 이 속성을 활용하면 자바스크립트에서 동적으로 입력 필드의 타입을 확인하거나 변경할 수 있습니다.

구문(Syntax)

type 속성의 기본 구문은 다음과 같습니다.

1. 문자열 값 반환하기

inputDatetimeObject.type

2. type 속성에 문자열 값 설정하기

inputDatetimeObject.type = stringValue

사용 가능한 문자열 값(String Values)

위 구문에서 “stringValue” 자리에는 아래 표와 같은 값들을 지정할 수 있습니다.

값	설명
date	입력 필드의 유형이 날짜(date) 형식임을 나타냅니다.
datetime	입력 필드의 유형이 날짜 및 시간(datetime) 형식임을 나타냅니다.
checkbox	입력 필드의 유형이 체크박스(checkbox)임을 나타냅니다.
text	입력 필드의 유형이 일반 텍스트(text)임을 나타냅니다.

예제 코드

실제로 Input Datetime type 속성이 어떻게 동작하는지 예제를 통해 살펴보겠습니다. 이 예제는 버튼을 클릭했을 때 입력 필드의 type 값을 확인하고, 해당 값에 따라 날짜와 시간 정보를 화면에 출력합니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Datetime type</title>
</head>
<body>
<form>
<div>
Date of Birth: <input type="datetime" id="datetimeSelect" value="2000-09-17T19:22Z">
</div>
</form>
<button onclick="changeType()">Get Time and Date</button>
<div id="divDisplay"></div>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputDatetime = document.getElementById("datetimeSelect");
   divDisplay.textContent = 'Input type: '+ inputDatetime.type;
   function changeType(){
      if(inputDatetime.type === 'text'){
         var currDate = inputDatetime.value.split("T")[0];
         var currTime = inputDatetime.value.split("T")[1];
      }
      divDisplay.textContent = 'Input Date: '+ currDate+', Input Time: '+currTime;
   }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'Get Time and Date' 버튼을 클릭하기 전

페이지가 로드되면 입력 필드의 type 값인 “datetime”이 화면에 그대로 출력됩니다.

HTML DOM Input Datetime type 속성 완벽 정리 – 사용법과 예제 코드

'Get Time and Date' 버튼을 클릭한 후

버튼을 클릭하면 스크립트가 실행되어 입력된 값에서 날짜와 시간을 분리한 뒤 각각 화면에 표시합니다.

HTML DOM Input Datetime type 속성 완벽 정리 – 사용법과 예제 코드

정리

HTML DOM의 Input Datetime type 속성은 읽기와 쓰기가 모두 가능하며, 입력 요소의 유형을 프로그래밍 방식으로 제어해야 하는 상황에서 유용하게 활용됩니다. 특히 폼 유효성 검사나 동적 UI 구현 시 입력 필드의 타입을 실시간으로 확인하고 변경할 수 있어 개발 편의성을 높여줍니다.