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

input type="date", input type="time" 요소로 날짜나 시간을 입력받는 방법

input type="date"

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

날짜 입력받는 방법 input - 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 - 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>

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

Post a Comment