HTML DOM Input Datetime value 속성 – 개념부터 실전 예제까지

HTML DOM의 Input Datetime value 속성은 datetime 타입 입력 필드의 value 속성값을 문자열 형태로 반환합니다. 이 속성을 통해 현재 설정된 날짜와 시간 값을 읽어올 수 있으며, 새로운 문자열 값을 할당하여 입력 필드의 값을 변경할 수도 있습니다.

문법(Syntax)

value 속성의 기본 문법은 다음과 같습니다.

1. 값 가져오기 (문자열 반환)

inputDatetimeObject.value

2. 값 설정하기 (문자열 할당)

inputDatetimeObject.value = 'String'

날짜/시간 값은 일반적으로 'YYYY-MM-DDThh:mmZ' 형식의 문자열로 지정합니다.

예제 코드

아래 예제는 Input Datetime value 속성을 활용해 날짜/시간 값을 조회하고 변경하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Value</title>
</head>
<body>
<form>
<div>
Date & Time: <input type="datetime" id="datetimeSelect" value="2015-08-22T16:24Z">
</div>
</form>
<button onclick="changeValue()">Change Value</button>
<div id="divDisplay"></div>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputDatetime = document.getElementById("datetimeSelect");
    divDisplay.textContent = 'Current value: '+ inputDatetime.value;
    function changeValue(){
       var currDatetime = inputDatetime.value;
       inputDatetime.value = '2017-03-17T16:24Z';
       divDisplay.textContent = 'Updated value from: '+currDatetime+' to: '+ inputDatetime.value;
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

'Change Value' 버튼 클릭 전

페이지가 로드되면 스크립트가 즉시 실행되어, 입력 필드에 초기 설정된 값인 2015-08-22T16:24Z가 'Current value'라는 문구와 함께 표시됩니다.

HTML DOM Input Datetime value 속성 – 개념부터 실전 예제까지

'Change Value' 버튼 클릭 후

버튼을 클릭하면 changeValue() 함수가 호출되어 입력 필드의 값이 2017-03-17T16:24Z로 변경되고, 변경 전후의 값을 비교한 결과가 화면에 출력됩니다.

HTML DOM Input Datetime value 속성 – 개념부터 실전 예제까지

정리

Input Datetime value 속성은 자바스크립트로 날짜/시간 입력 필드를 동적으로 제어할 때 유용하게 사용됩니다. 값을 읽어오는 것과 설정하는 것 모두 간단한 문자열 연산으로 처리할 수 있어, 폼 유효성 검사나 날짜 데이터 가공 등 다양한 상황에서 활용도가 높습니다.