HTML DOM Input Date value 속성 – 날짜 입력 필드 값 가져오기 및 설정 방법

HTML DOM의 Input Date value 속성은 <input type="date"> 요소의 value 속성 값을 문자열 형태로 반환합니다. 이 속성은 읽기 전용이 아니기 때문에, 자바스크립트로 새로운 날짜 문자열을 할당하여 입력 필드의 값을 동적으로 변경하는 것도 가능합니다.

구문

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

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

inputDateObject.value

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

inputDateObject.value = 'String'

설정하거나 반환되는 날짜 값은 반드시 YYYY-MM-DD 형식(예: 2024-05-15)의 문자열이어야 합니다.

예제

다음은 Input Date value 속성을 활용한 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Date Value</title>
</head>
<body>
<form>
<div>
달력: <input type="date" id="dateSelect" value="2015-08-22">
</div>
</form>
<button onclick="changeValue()">값 변경</button>
<div id="divDisplay"></div>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputDate = document.getElementById("dateSelect");
    divDisplay.textContent = '현재 값: '+ inputDate.value;
    function changeValue(){
       var currDate = inputDate.value;
       inputDate.value = '1968-02-27';
       divDisplay.textContent = '변경 전 값: '+currDate+' → 변경 후 값: '+ inputDate.value;
    }
</script>
</body>
</html>

출력 결과

위 코드를 실행하면 다음과 같은 결과가 표시됩니다.

'값 변경' 버튼을 클릭하기 전 -

HTML DOM Input Date value 속성 – 날짜 입력 필드 값 가져오기 및 설정 방법

'값 변경' 버튼을 클릭한 후 -

HTML DOM Input Date value 속성 – 날짜 입력 필드 값 가져오기 및 설정 방법

주요 특징 정리

value 속성은 항상 YYYY-MM-DD 형식의 문자열을 반환합니다.
사용자가 아직 날짜를 선택하지 않은 경우 빈 문자열("")이 반환됩니다.
유효하지 않은 형식의 문자열을 설정하면 해당 값은 무시됩니다.
Chrome, Firefox, Edge, Safari, Opera 등 모든 최신 브라우저에서 지원됩니다.