HTML DOM의 Input Date type 속성은 <input type="date"> 요소의 입력 유형(type)을 가져오거나 설정하는 기능을 합니다. 이 속성을 활용하면 자바스크립트를 통해 날짜 입력 필드의 현재 타입을 확인하거나, 실행 중에 다른 타입으로 동적으로 변경할 수 있습니다.
문법(Syntax)
type 속성의 기본적인 사용 문법은 다음과 같습니다.
1. 값 반환하기 (읽기)
inputDateObject.type
2. 값 설정하기 (쓰기)
inputDateObject.type = stringValue
설정 가능한 문자열 값(String Values)
위 문법에서 stringValue 자리에는 아래와 같은 문자열 값을 지정할 수 있습니다.
| stringValue | 설명 |
|---|---|
| date | 입력 필드가 날짜(date) 유형임을 정의합니다. |
| radio | 입력 필드가 라디오 버튼(radio) 유형임을 정의합니다. |
| checkbox | 입력 필드가 체크박스(checkbox) 유형임을 정의합니다. |
예제(Example)
다음은 Input Date type 속성을 실제로 활용한 예제입니다. 버튼을 클릭하면 날짜 입력 필드의 타입이 텍스트(text)로 변경되는 동작을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Date type</title>
</head>
<body>
<form>
<div>
Calendar: <input type="date" id="dateSelect" value="2017-05-01">
</div>
</form>
<button onclick="changeType()">Change Type</button>
<div id="divDisplay"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDate = document.getElementById("dateSelect");
divDisplay.textContent = 'Input type: '+ inputDate.type;
function changeType(){
if(inputDate.type === 'date'){
var currDate = inputDate.value;
inputDate.type = 'text';
inputDate.value = currDate;
}
divDisplay.textContent = 'Input type: '+ inputDate.type;
}
</script>
</body>
</html>
예제 코드 설명
- 페이지가 로드되면 <div> 영역에 현재 입력 필드의 타입(
date)이 표시됩니다. - 'Change Type' 버튼을 클릭하면
changeType()함수가 실행됩니다. - 함수 내부에서는 먼저 현재 날짜 값을 변수에 저장한 뒤, 입력 필드의 타입을
text로 변경하고 저장해 둔 값을 다시 할당하여 기존 날짜가 유지되도록 처리합니다. - 마지막으로 변경된 타입이 화면에 갱신되어 출력됩니다.
실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Change Type' 버튼 클릭 전 −
'Change Type' 버튼 클릭 후 −
버튼을 클릭하기 전에는 입력 필드의 타입이 date로 표시되지만, 클릭 후에는 text로 변경된 것을 확인할 수 있습니다. 이처럼 type 속성을 사용하면 브라우저에서 제공하는 날짜 선택 UI와 일반 텍스트 입력 방식을 상황에 맞게 전환할 수 있습니다.