JSX | input 태그 시간 초까지 입력 받기

크롬 브라우저 기준으로 작성되었습니다 !

 

시간만 입력 받을 때 ( type='time' )

                <input
                  name='selectedTime'
                  defaultValue='00:00:00'
                  type='time'
                  step='1' // seconds
                  required
                  style={{ width: '150px' }}
                  className='form-control'
                  onChange={(e) => {
                    const newValue = e.target.value as string;
                    setValue('selectedTime', newValue);
                  }}
                />

 

초까지 입력하기 위해서 필요한 부분은 step='1' 부분이다.

크롬 브라우저를 기준으로 step = '1'을 입력하지 않으면 hh:mm a 까지만 입력할 수 있으며,

step ='1'은 01초를 의미했다.

step='1'을 입력하지 않았을 때

 

아래는 날짜와 시간을 따로 분리하여 input을 출력하는 화면이다.

이렇게 하면 시간에만 defaultValue를 줄 수 있다는 장점이 있다.

 

참고로 step -'2'로 설정하고 홀수 초를 선택하면 아래와 같은 툴팁 메시지가 뜬다.

 

 

 

날짜와 시간 하나의 input으로 입력 받을 때 ( type='datetime-local' )

                <input
                  defaultValue={defaultDate}
                  type='datetime-local'
                  step='1'
                  max={maxDate}
                  style={{ marginRight: '5px', width: '230px' }}
                  className='form-control'
                  {...register('selectedDate', {
                    required: {
                      value: true,
                      message: t('text.file.dateIsRequired'),
                    },
                  })}
                />

type='datetime-local' 을 사용하면 날짜와 시간을 하나의 input으로 사용해줄 수 있다.

 

이 경우에는 defaultValue를 설정할 때 날짜까지 설정해주어야 한다.

datetime-local에서 defaultValue를 설정하는 방법은 아래의 게시글에서 다루었다.

https://yesolz.tistory.com/43

React, JSX | input 오늘 날짜, 현재 시각으로 defaultValue 설정하기

 

 

 

 

reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#using_the_step_attribute