날짜, 시간 입력받는 방법 - input - date, time
input type="date"
type을 date로 지정하면 날짜를 입력받을 수 있습니다.
width="1280"
height="720"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhspHtlYYAHGLTF2gx0HMSpAYVC5zSeL4l3Sgwa17iiAsgoz97w4DFtBOgIBR2qzEukWXKiDmf-Pn4abDNqgvcZnWWIN2vxBPLlsLThyphenhyphenNyivvxp4VTUvFiC5kiXgHakmsFG52uYSCoQDcI/s0/type-date-calender.png"
/>
웹브라우저마다 표현 방식이 다릅니다.
기본형
<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>data-default-tab="result"
data-editable="true"
data-height="441"
data-pen-title="HTML 날짜 입력하는 방법 input date 예제1"
data-slug-hash="oNxmRva"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 2
- 2022년 12월 25일을 기본값으로 하는 예제입니다.
<form>
<p><input type="date" value="2022-12-25"></p>
<p><input type="submit" value="Submit"></p>
</form>data-default-tab="result"
data-editable="true"
data-height="441"
data-pen-title="HTML 날짜 입력하는 방법 input date 예제2"
data-slug-hash="YzqBbwg"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 3
2022년 12월 10일부터 2022년 12월 25일까지만 입력할 수 있는 양식입니다.
<form>
<p><input type="date" value="2022-12-19" min="2022-12-10" max="2022-12-25"></p>
<p><input type="submit" value="Submit"></p>
</form>data-default-tab="result"
data-editable="true"
data-height="441"
data-pen-title="HTML 날짜 입력하는 방법 input date 예제3"
data-slug-hash="rNePgWJ"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
input type="time"
type을 time으로 지정하면 시간을 입력받을 수 있습니다.
width="1280"
height="720"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGSmP6s5HOKXwViI54cU1ISuByiXEmTLcG9BsBssQSfQUrTpK8qWiWU3mPI2MDEKJ0ZJsWw4CUvQ-mxgL7tw2LTOuQBkE10LzQ3MKaEpnH7fdAvTlVz1t161hjP-ZzH0Isv_v3O3fJ-FM/s0/type-time-+schedule.png"
/>
기본형
<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>data-default-tab="result"
data-editable="true"
data-height="441"
data-pen-title="HTML 시간 입력하는 방법 input time 예제1"
data-slug-hash="eYZxaEV"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 245px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 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>data-default-tab="result"
data-editable="true"
data-height="441"
data-pen-title="HTML 시간 입력하는 방법 input time 예제2"
data-slug-hash="ZEWwNar"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.