HTML 날짜 입력: date의 value·min·max·step 사용법
HTML의 <input type="date">는 연·월·일을 입력하는 컨트롤입니다. 표시되는 달력과 날짜 순서는 브라우저·지역 설정에 따라 다를 수 있지만, value와 제출 값은 YYYY-MM-DD 형식으로 정규화됩니다. 시간이나 시간대 정보는 포함하지 않습니다.
기본 날짜와 입력 범위 지정
value로 초기 날짜를, min·max로 허용되는 첫 날짜와 마지막 날짜를 정합니다. 두 경계 날짜도 범위에 포함됩니다. 속성에는 “2030년 5월 20일” 같은 표시 문구가 아니라 유효한 날짜 문자열을 넣어야 합니다. 잘못된 min·max는 의도한 범위 제한으로 동작하지 않을 수 있습니다.
name은 제출 항목 이름이고 id는 label 연결에 사용합니다. 필수 입력은 required로 지정합니다. 범위를 제한해도 브라우저 UI가 모두 같은 방식으로 날짜 입력을 막는 것은 아니며, 직접 입력된 범위 밖 값은 제약 검사를 통과하지 못합니다.
전체 예제: 날짜 문자열과 유효성 확인
아래 문서를 date-demo.html로 저장해 브라우저에서 엽니다. 2030년 5월 안의 날짜를 선택해 값을 표시하는 실습이며 실제 예약이나 서버 전송은 하지 않습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>날짜 입력 값 확인</title>
</head>
<body>
<h1>방문 날짜 실습</h1>
<form id="demo">
<label for="visit">방문 날짜 (2030년 5월, 필수)</label>
<input type="date" id="visit" name="visit"
value="2030-05-20" min="2030-05-01" max="2030-05-31" step="1" required>
<button type="submit">값 확인</button>
<button type="reset">초기화</button>
</form>
<p id="result" aria-live="polite"></p>
<script>
const form = document.getElementById('demo');
const result = document.getElementById('result');
form.addEventListener('submit', (event) => {
event.preventDefault();
result.textContent = 'visit = ' + new FormData(form).get('visit');
});
form.addEventListener('reset', () => { result.textContent = ''; });
</script>
</body>
</html>- 처음 표시된 날짜에서 값 확인을 누르면
visit = 2030-05-20이 나옵니다. - 다른 5월 날짜를 골라 확인하면 그 날짜 문자열로 바뀝니다. 범위 밖 날짜를 입력해 제출하면 min·max 검사가 막습니다.
- 날짜를 지우고 제출하면 required 검사가 막습니다. 초기화를 누르면 5월 20일로 돌아갑니다.
step의 단위는 일이며 기본값은 1입니다. 예제에서 step만 7로 바꾸면 min인 5월 1일을 기준으로 1·8·15·22·29일이 맞는 간격입니다. 초기값인 20일은 간격에 맞지 않게 됩니다. 8일을 골라 통과 여부를 비교한 뒤 step을 1로 복원하면 매일 선택할 수 있습니다. 주말·휴일 같은 복잡한 업무 달력은 step 하나로 처리되지 않습니다.
표시 형식·시간대·서버 검증의 주의점
날짜 선택 UI의 지역별 모양을 바꾸려고 value에 슬래시나 지역화된 문자열을 넣지 않습니다. 달력 날짜만 필요한 경우 문자열을 그대로 다루면 불필요한 시간대 변환을 피할 수 있습니다. 시각까지 필요한 데이터라면 date만으로 충분하지 않으며 시간대 정책도 별도로 정해야 합니다.
날짜 입력에는 size 속성 대신 CSS로 너비를 조절합니다. label과 범위 설명을 제공하고, 날짜 컨트롤을 지원하지 않는 환경이나 브라우저 검사를 우회한 요청도 고려해 서버에서 실제 날짜·윤년·범위·업무상 가능 여부를 검증합니다. 날짜를 선택했다고 자리가 예약되거나 서버의 현재 가능 여부가 확인되는 것은 아닙니다. 속성 규칙은 MDN date 입력 문서에서 확인할 수 있습니다.
