다음과 같이 재작성된 제목: React-hook-form이 포함된 React 통합 DateTimePicker가 날짜를 올바르게 표시할 수 없습니다.

Question

React 날짜/시간 선택기를 추가하려는 양식이 있는데 react-hook-form와도 통합하여 양식의 나머지 부분과 작동하지만 전혀 작동하지 않는 것 같습니다. .

양식이 처음 렌더링되면 날짜 선택기에 현재 날짜가 표시되지 않고 "----------"만 표시되며 팝업에서 날짜를 선택하면 필드의 날짜가 표시됩니다. 변경하지 마십시오.

import { Controller, useForm } from 'react-hook-form'
import DateTimePicker from 'react-datetime-picker'
import 'react-datetime-picker/dist/DateTimePicker.css'
import 'react-calendar/dist/Calendar.css'

const Jobs = () => {
    const { control, register, handleSubmit, watch, formState: { errors } } = useForm();

    const onSubmit = handleSubmit(async ({ firstname, startdate }) => {
        console.log(startdate)
    })

    return (
        <form onSubmit={handleSubmit(onSubmit)}>

            <div>
                <input
                    id="firstname"
                    name="firstname"
                    type="text"
                    { ...register("firstname") }
                />
            </div>

            <div>
                <Controller
                    control={control}
                    name='startdate'
                    render={({ field: { onChange, value } }) => (
                        <DateTimePicker
                            onChange={onChange}
                            selected={value}
                        />
                    )}
                />
            </div>
        </form>
    )
}

Answer 1

react-hook-form과 React-datetime-picker를 사용하신 것이 올바른 것 같습니다. 현재 겪고 있는 문제는 날짜 필드의 초기 값이 잘못 설정되었기 때문일 수 있습니다.

이 문제를 해결하려면 컨트롤러의 defaultValue 속성을 사용하여 날짜 필드의 초기값을 설정할 수 있습니다. 또한, React-datetime-picker는 Date 값을 예상하므로 DateTimePicker에 전달된 값이 Date 객체인지 확인해야 합니다.

업데이트된 코드는 다음과 같습니다.

으아아아

defaultValue를 new Date()로 설정하면 이제 양식이 처음 렌더링될 때 날짜 선택기가 현재 날짜를 표시해야 합니다. 또한 new Date(value)를 사용하여 DateTimePicker에 값을 전달할 때 Date 개체인지 확인하세요.