날짜, 시간 입력받는 방법 - input - date, time

input type="date"

type을 date로 지정하면 날짜를 입력받을 수 있습니다.

웹브라우저마다 표현 방식이 다릅니다.

 

기본형

<input type="date" value="xxx" min="yyy" max="zzz">

• value : 선택 항목으로, 기본 날짜를 정합니다.
• min : 선택 항목으로, 입력 가능한 가장 빠른 날짜입니다.
• max : 선택 항목으로, 입력 가능한 가장 늦은 날짜입니다.

 

예제 1

• 날짜를 입력 받는, 선택 항목이 없는 가장 간단항 양식입니다.

<form>
  <p><input type="date"></p>
  <p><input type="submit" value="Submit"></p>
</form>

 

예제 2

• 2024년 12월 25일을 기본값으로 하는 예제입니다.

<form>
  <p><input type="date" value="2024-12-25"></p>
  <p><input type="submit" value="Submit"></p>
</form>

 

예제 3

• 2024년 12월 10일부터 2024년 12월 25일까지만 입력할 수 있는 양식입니다.

<form>
  <p><input type="date" value="2024-12-19" min="2024-12-10" max="2024-12-25"></p>
  <p><input type="submit" value="Submit"></p>
</form>

 

---

 

input type="time"

type을 time으로 지정하면 시간을 입력받을 수 있습니다.

 

기본형

<input type="time" value="xxx" min="yyy" max="zzz">

• value : 선택 항목으로, 기본 시간을 정합니다.
• min : 선택 항목으로, 입력 가능한 가장 빠른 시간입니다.
• max : 선택 항목으로, 입력 가능한 가장 늦은 시간입니다.

 

예제 1

• 시간을 입력 받는, 선택 항목이 없는 가장 간단항 양식입니다.

<form>
  <p><input type="time"></p>
  <p><input type="submit" value="Submit"></p>
</form>

 

예제 2

• 기본값과 입력 가능한 시간 범위를 정한 예제입니다.

<form>
  <p><input type="time" value="13:10:59" min="13:00:00" max="15:00:00"></p>
  <p><input type="submit" value="Submit"></p>
</form>