1

I am very new to React and I found the react-calendar through searching and used it as a date picker for my app. When I save a new entity on my app, it saves the date from react-calendar to my database just fine. But when I am updating the entity on the front end, is there a way to show the datetime value on the react-calendar? I know the format is wrong so it is throwing an error. How do I format it properly for react-calendar to accept the datetime/date value and possibly display it visually on the date picker?

This is what my console logs are showing currently:

enter image description here

enter image description here

export function PatientForm(props) {
    const [PatientId, setPatientId] = useState(props.patient.patientId);
    const [FirstName, setFirstName] = useState(props.patient.firstName);
    const [LastName, setLastName] = useState(props.patient.lastName);
    const  dateReceived  = props.patient.dateOfBirth;
    const formattedDateOfBirth = moment(dateReceived).format('MMMM Do YYYY');

    console.log('Got the datetime properly: ' + props.patient.dateOfBirth);
    console.log('date received: ' + dateReceived);
    console.log('formatted DOB: ' + formattedDateOfBirth);

    const [DateOfBirth, setDateOfBirth] = useState(formattedDateOfBirth); 

    const [Gender, setGender] = useState(props.patient.gender);
    const [DoctorId, setDoctorId] = useState(props.patient.doctorId);

    const handleSubmit = (e) => {
        e.preventDefault();
        props.submit({ PatientId, FirstName, LastName, DateOfBirth, Gender, DoctorId });
    }

export function UpdatePatient(props) {
    const { patientId } = useParams();

    const [patient, setPatient] = useState();
    const navigate = useNavigate();

    useEffect(() => {
        fetch('patient/edit/' + patientId)
            .then(res => res.json())
            .then(p => setPatient(p));
    }, []);

    const handleSubmit = (patient) => {
        fetch('patient/update',
            {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(patient)
            }
        );
        navigate('/listpatients');
    }

    //FIX ME: NOT RENDERING REACT-CALENDAR PROPERLY
    return (
        patient ?
            <PatientForm patient={patient} submit={handleSubmit} />
            :
            <div>...loading</div>
    );
}
JayM
  • 61
  • 8

1 Answers1

0

SOLVED

I had to pass the props to a new Date like this and also declare separate variable for DateOfBirth:

const [value, setValue] = useState(new Date(props.patient.dateOfBirth));
const [DateOfBirth, setDateOfBirth] = useState(props.patient.dateOfBirth);

Then inside the Calendar tag, I had to use the keyword from reac-calendar "defaultValue" then pass in the value previously declared.

 <Calendar calendarType="US" defaultValue={value} onChange={onChange} />

I also created a helper function to do something inside onChange basing this on react-calendar's documentation:

function onChange(DateOfBirth) {
    setDateOfBirth(DateOfBirth);
}

See my sandbox here: Solution

JayM
  • 61
  • 8