개요
HTML DOM의 Input DatetimeLocal value 속성은 datetime-local 타입 입력 필드의 value 속성 값을 문자열 형태로 반환합니다. 이 속성은 읽기와 쓰기가 모두 가능하므로, 자바스크립트를 이용해 날짜와 시간 값을 동적으로 조회하거나 변경할 수 있습니다.
datetime-local 입력 필드는 HTML5에서 도입된 요소로, 사용자가 시간대(time zone) 정보 없이 지역 기준의 날짜와 시간을 선택할 수 있게 해줍니다. 이때 value 값은 항상 YYYY-MM-DDThh:mm 형식의 문자열로 표현됩니다.
문법(Syntax)
1. 값 반환하기
inputDatetimeLocalObject.value
2. 값 설정하기
inputDatetimeLocalObject.value = 'String'
예제
다음은 Input DatetimeLocal value 속성을 활용한 예제입니다. 버튼을 클릭하면 시험 일시(examination date-time)가 새로운 값으로 자동 변경되며, 변경된 날짜가 화면에 출력됩니다.
<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal value</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Datetime-Local-value</legend>
<label for="datetimeLocalSelect">Examination Date-Time :
<input type="datetime-local" id="datetimeLocalSelect" value="2022-10-29T09:30">
</label>
<input type="button" onclick="updateValue()" value="Not Ready For Examination">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
function updateValue() {
inputDatetimeLocal.value = '2022-11-02T09:30';
divDisplay.textContent = 'New Examination Date: '+(inputDatetimeLocal.value).split('T')[0];
}
</script>
</body>
</html>코드 설명
- 버튼 클릭 시
updateValue()함수가 호출되어 입력 필드의 value가'2022-11-02T09:30'으로 변경됩니다. split('T')[0]을 사용하면 날짜와 시간이 결합된 문자열에서 날짜 부분(2022-11-02)만 추출할 수 있습니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면을 확인할 수 있습니다.
'Not Ready For Examination' 버튼을 클릭하기 전:
'Not Ready For Examination' 버튼을 클릭한 후:
