Can not set defaultValue in datepicker antd

Question

I am working on add users form. While adding, I may or may not select expiry date.

Now In edit scenario if Im editing a user who has no expiry date then in that case antd datepicker shows invalid date and when datepicker is openened it shows nan instead of any date.

If edit user value has expiry date then I want to show it in defaultValue else no I don't want to select defaultValue.

                                            <FormControl>
                                                <Controller
                                                {...register(`userCountryRoleMappings.${index}.roleExpiryDate`)}
                                                render={() => (
                                                    <DatePicker 
                                                    placeholder="Role Expiry Date"

                                                    defaultValue={id ? dayjs(getValues(`userCountryRoleMappings.${index}.roleExpiryDate`)) : dayjs("")}
                                                    disabled={getValues(`userCountryRoleMappings.${index}.neverExpireRole`)}
                                                    onChange={(value: dayjs.Dayjs | null, dateString: string) => {
                                                        setValue(`userCountryRoleMappings.${index}.roleExpiryDate`, dateString);
                                                    }}
                                                    size="large"
                                                    disabledDate={d => !d || d.isBefore(new Date().toISOString())}
                                                    />
                                                )} 
                                                control={control}
                                                name={`userCountryRoleMappings.${index}.roleExpiryDate`}/>
                                        </FormControl>

So what I was thinking is, in the defualtValue above I could put some logic that if id and role expiry date is present then convert that date in dayjs or else simply return false. But defaultValue is not accepting this -

defaultValue={false}

Not able to figure out how to achieve this. And I don't want to use 2 datepickers based on conditional id and date

Any help is highly appreciated! TIA

Answer 1

Your date has an invalid format. use a valid format for the date like dayjs() or dayjs().format('YYYY-MM-DD')