input element 날짜 및 시간 - by. UXKM

요약 설명

<input> 요소는 사용자 입력을 받기 위한 HTML 폼 요소입니다.
다양한 type 속성을 사용해 텍스트 입력, 비밀번호 입력, 체크박스, 라디오 버튼, 파일 업로드 등 다양한 입력 형식을 제공합니다.
name, value, placeholder, required 등의 속성을 활용해 입력 데이터의 특성을 정의할 수 있으며, JavaScript와 함께 사용해 유효성 검사 및 동적 처리가 가능합니다.

요약 설명

날짜 및 시간 입력 요소는 사용자가 날짜 및 시간을 입력할 수 있도록 제공하는 요소로, 브라우저에서 기본적으로 캘린더 또는 시간 선택 UI를 제공하여 사용자가 쉽게 날짜 및 시간을 선택할 수 있도록 합니다.
각 입력 타입에 따라 연, 월, 일, 주, 시, 분 등을 입력할 수 있으며, 최소값(min), 최대값(max), 증가 단위(step) 등을 설정하여 입력을 제한할 수도 있습니다.

대표적인 타입으로 date, datetime-local, month, week, time 등이 있습니다.

관련 속성

[min] 선택 사항 최소값 설정

  • 사용자가 선택할 수 있는 날짜 또는 시간의 최소값을 설정합니다.
  • min 속성을 설정하면 사용자는 해당 값보다 이전의 날짜 또는 시간을 선택할 수 없습니다.
  • type="date", type="datetime-local", type="month", type="week", type="time" 에서 사용됩니다.

[max] 선택 사항 최대값 설정

  • 사용자가 선택할 수 있는 날짜 또는 시간의 최대값을 설정합니다.
  • max 속성을 설정하면 사용자는 해당 값보다 이후의 날짜 또는 시간을 선택할 수 없습니다.
  • type="date", type="datetime-local", type="month", type="week", type="time" 에서 사용됩니다.

[step] 선택 사항 값 증가/감소 단위 설정

  • 날짜 및 시간 값이 증가하거나 감소하는 단위를 설정합니다.
  • 기본값은 1이며, 예를 들어 step="7"을 설정하면 1주 단위로 날짜가 변경됩니다.
  • type="date"에서는 일 단위, type="time"에서는 초 단위로 증가/감소 단위를 지정할 수 있습니다.
  • step="any"를 설정하면 사용자가 자유롭게 값을 입력할 수 있습니다.

[type]별 예제

[type="date"] (날짜 선택 필드)

사용자가 날짜를 선택할 수 있도록 하는 입력 필드입니다.
달력 형식으로 날짜를 선택할 수 있으며, 브라우저에서 날짜 선택을 위한 인터페이스를 자동으로 제공합니다. min과 max 속성으로 선택할 수 있는 날짜 범위를 제한할 수 있습니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

[type="datetime-local"] (날짜와 시간 선택 필드)

사용자가 날짜와 시간을 모두 선택할 수 있도록 하는 입력 필드입니다.
날짜와 시간을 함께 설정할 수 있으며, min과 max 속성으로 선택할 수 있는 범위를 지정할 수 있습니다. 지역별 시간대의 영향을 받지 않으며, 로컬 시간으로 입력됩니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

[type="month"] (연도와 월 선택 필드)

사용자가 연도와 월을 선택할 수 있도록 하는 입력 필드입니다. 날짜를 입력하는 대신 년도와 월을 선택할 수 있는 옵션을 제공합니다.
min과 max 속성으로 선택할 수 있는 연도와 월 범위를 제한할 수 있습니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

[type="week"] (연도와 주 선택 필드)

사용자가 연도와 주를 선택할 수 있도록 하는 입력 필드입니다. 주 단위로 날짜를 선택할 수 있습니다.
한 해에는 총 52주 또는 53주가 있으며, 특정 연도(예: 2025년) 내에서만 선택할 수 있도록 하려면 min과 max 속성을 설정해야 합니다.

2025년만 선택하는 예시 :
min="2025-W01" : 2025년의 첫 번째 주부터 선택 가능
max="2025-W52" : 2025년의 마지막 주까지 선택 가능

2025-W01, 2025-W01에서 W가 붙는 이유는 ISO 8601 표준의 주(Week) 기반 날짜 형식을 따르기 때문입니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

[type="time"] (시간 선택 필드)

사용자가 시간을 선택할 수 있도록 하는 입력 필드입니다.
사용자가 시와 분을 선택할 수 있게 해 주며, AM/PM또는 24시간 형식이 사용될 수 있습니다. 또한, min과 max 속성을 통해 선택 가능한 시간 범위를 설정할 수 있습니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.