react-date-picker 사용하여 time-picker 재사용 컴포넌트 만들기

<form>
  <label for="appt-time">Choose an appointment time: </label>
  <input id="appt-time" type="time" name="appt-time" step="600" />
</form>

input의 type time을 사용 했을 때 30분 간격으로 선택지를 주거나 할 때 step이란 속성을 주면 된다고 나와있지만 실제로 사용 해보면 정상적으로 동작하지 않는다.

 

react-date-picker에서 showTimeSelectOnly 옵션을 활용하여 재사용 컴포넌트 time-picker 생성

interface Props<T extends Record<string, any>> {
	control: Control<T>;
	name: Path<T>;
	validationOptions?: Omit<
		RegisterOptions<T, Path<T>>,
		'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'
	>;
}

const TimePicker = <T extends Record<string, any>>(props: Props<T>) => {
	const { control, name, validationOptions } = props;

	const {
		field,
		fieldState: { invalid, isTouched, isDirty, error },
		formState: { touchedFields, dirtyFields },
	} = useController({
		name,
		control,
		rules: { ...validationOptions },
	});

	return (
		<DatePicker
			className={styles.datePicker}
			locale={ko}
			showTimeSelect
			showTimeSelectOnly
			timeIntervals={30}
			timeCaption="Time"
			dateFormat="HH:mm"
			selected={field.value}
			onChange={field.onChange}
			timeClassName={d => {
				return styles.unselectedDay;
			}}
		></DatePicker>
	);
};

export default TimePicker;

react-hook-form의 control와 useController 훅을 이용하여 보다 편리하게 handling 할 수 있다.

 

• 호출 부분

... 중략
const {
    register,
    formState: { errors, isValid },
    handleSubmit,
    reset,
    getValues,
    watch,
    control,
    setValue,
} = useForm({
    mode: 'onChange',
});

... 중략

<TimePicker control={control} name="testStartTime"></TimePicker>

 

 

Reference

- (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#step)

- (https://reactdatepicker.com/#example-select-time-only)