React day picker gives an error when double click on data

Question

index.js:373 Uncaught RangeError: Invalid time value at format (index.js:373:1) at AvailableAppointment (AvailableAppointment.js:16:1) at renderWithHooks (react-dom.development.js:16175:1) at updateFunctionComponent (react-dom.development.js:20387:1) at beginWork (react-dom.development.js:22430:1) at beginWork$1 (react-dom.development.js:27381:1) at performUnitOfWork (react-dom.development.js:26513:1) at workLoopSync (react-dom.development.js:26422:1) at renderRootSync (react-dom.development.js:26390:1) at recoverFromConcurrentError (react-dom.development.js:25806:1)

import banner from '../../assets/images/chair.png'
import { DayPicker } from 'react-day-picker';
import { format } from 'date-fns';

const AppointmentBanner = ({ selected, setSelected }) => {

    let footer = <p>Please pick a day.</p>;
    if (selected) {
        footer = <p>You picked {format(selected, 'PP')}.</p>;
    }
    return (
        <div>
            <div class="hero min-h-screen ">
                <div class="hero-content flex-col lg:flex-row-reverse">
                    <img src={banner} class="max-w-sm rounded-lg shadow-2xl" alt='dental chair' />
                    <div className='border hover:border-primary rounded-lg mx-12'>
                        <DayPicker
                            mode="single"
                            selected={selected}
                            onselected={setSelected}
                            footer={footer} />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default AppointmentBanner;

score 0 · Accepted Answer · edited May 18 '22 at 09:36

0

I got the solution:

use

onDayClick={setSelected}

instead of using

onselected={setSelected}

edited May 18 '22 at 09:36

maximus383

584
8
25

answered May 16 '22 at 12:20

Mohammad Ibrahim Khalil

84
8

Monzurul Islam · Answer 2 · 2022-08-31T18:43:09.233

0

on v8.1.0 i also got error , i used onDayClick={setSelected} instead of onselected={setSelected}

So, You have to use onDayCick instead of onSelected. It will work after clicking twice on a date.

edited Aug 31 '22 at 18:43

answered Aug 19 '22 at 17:17

Monzurul Islam

41
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 30 '22 at 06:28

React day picker gives an error when double click on data

2 Answers2