Error: Invalid Jalali year -100721 on NextJS

[nafasebra]

I got this error when app is mounted

and this is my component:

<Datepicker 
  input={
    <Field
      label="تاریخ رفت"
      id="date"
      name="date"
    />
  } 
  modeTheme={'light'}
  theme={'blue'}
  closeWhenSelectADay={true} // boolean
  defaultValue={moment()}
  value={dateInput}
  onChange={(val) => setDateInput(val)}
/>

Are you have any suggestion for solve the problem? what i to do?

[navidmadannezhad]

Hi Nafas, I also encountered the issue you've dealt with. Maybe you have solved it until now, but for whoever may encounter this in future, this is my working example:

const DateInput = (props: DatepickerProps) => {
    const todayDate = new Intl.DateTimeFormat('en-CA', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
    }).format(new Date()).replace(/-/g, '/');
    const [date, setDate] = useState<string>(props.value ?? todayDate);

    useEffect(() => {
        props.onChange(date);
    }, [date])

    return(
        <div>
            <Datepicker
                lang="fa"
                footer={(moment, setValue) => {
                    return (
                        <>
                            <div
                                onClick={() => {
                                    if (setValue) setValue(moment());
                                }}
                            >
                            برو به امروز
                            </div>
                        </>
                    );
                }}
                closeWhenSelectADay={true}
                disabled={false}
                format={'YYYY-MM-DD'}
                input={<SimpleInput placeholder="انتخاب تاریخ" />}
                loading={false}
                modeTheme={'light'}
                theme={'red'}
                value={date}
                adjustPosition={'auto'}
                onChange={(val: any) => {
                    // passes miladi
                    setDate(val?.format('YYYY/MM/DD') ?? "");
                }}
            />
        </div>
    )
}

Pay attention that you must set the value prop as gregorian, like "2022/11/02", the Datepicker component automatically converts it to shamsi date. Also do not forget to set the lang prop to "fa".