[html5] input type date 와 input type time

WEB

[html5] input type date 와 input type time

aws이까이꺼 2023. 6. 17. 14:13

25년을 넘게 개발해오고 있는 나지만, 얼마전에 이걸 쓰기 시작했으니, 참. 공부를 했다가도 까먹고 있다가 불연듯 생각나는 경우가 있다. 예전에는 date와 datetime을 입력받기 위해서 열심히 스크립트도 만들고 레이어를 올리거나 하는 방식으로 했었는데... 세상 편한 이걸 두고 참. 간단히 사용법 살펴보자

1. input type="time"

거두 절미하고 codepen에 한 번 써보자

See the Pen <a href="https://codepen.io/kigqzaer-the-lessful/pen/VwVapVL"> html5 input type date and input type datetime</a> by 기꾸 (<a href="https://codepen.io/kigqzaer-the-lessful">@kigqzaer-the-lessful</a>) on <a href="https://codepen.io">CodePen</a>.

[ 브라우져별 표시 모양 ]

브라우져마다 표시모양이 제각각

[ 값 = YYYY-MM-DD ]

값은 위 모양대로 통일된다. 또는 빈값.

[ 추가 특성 ]

max	허용하는 가장 늦은 날짜
min	허용하는 가장 이른 날짜
step	위/아래 조절 버튼을 눌렀을 때와, 날짜 유효성을 검증할 때 사용하는 스텝 간격.=>거의 사용하지 않음.

See the Pen <a href="https://codepen.io/kigqzaer-the-lessful/pen/wvQGdap"> input type date min max</a> by 기꾸 (<a href="https://codepen.io/kigqzaer-the-lessful">@kigqzaer-the-lessful</a>) on <a href="https://codepen.io">CodePen</a>.

일아래 화면처럼 다른날짜는 죽어(?)있다.

min/max는 쓸만하다. 그리고 required로 스타일 먹인 것도 잘된다.

2. input type="time"

거두 절미하고 codepen

See the Pen <a href="https://codepen.io/kigqzaer-the-lessful/pen/oNQxWxx"> input type time</a> by 기꾸 (<a href="https://codepen.io/kigqzaer-the-lessful">@kigqzaer-the-lessful</a>) on <a href="https://codepen.io">CodePen</a>.

[ 값 = 00:00 or 00:00:00 ]

화면에는 오전/오후 00:00 이렇게보이지만 값을 찍어보면

"13:30"
"13:30:10"

이렇게 24시간 기준으로 잘 나온다.

초단위 설정은 step을 지정하라.

날짜 선택처럼 min/max required style 다 괜찮다.

그래도, 이슈가 없을 순 없고, 주로 admin(관리자)모드 개발시에 유용하다.

예를 들어 min max가 밤 23시부터 다음날 새벽 01시라면 어쩔건가? 숙제다. ㅎ

그럼 다음시간에 또... 자주봐요~!

"배너 클릭시 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

728x90