Clear date selection for optional fields

[junzhengca]

How do I clear the date selection or start with an empty input? This is quite useful for optional fields. For example I might want user to specify an empty date to indicate there is no expiry date.

Seems like onDateChange have to set a Date object. Prehaps we can make it (date: Date | null) => void?

[aboveyunhai]

I didn't understand your question properly, can u rephrase the question a little bit? Do you mean something like Range Picker since you mention no expiry date

For empty date, date is an optional field by default. so you can have the hook const [date, setDate] = useState() without passing anything, maybe my doc example is misleading but typescript is clear. so you can just do setDate(undefined) to reset the date. or you want something like a clear button to be inside the date picker panel.

[junzhengca]

This indeed works, thanks a lot for the response. @aboveyunhai maybe consider adding a clear button, but for my usecase I can just create one myself externally.

For reference if anyone else encounters the same problem

const [date, setDate] = useState<Date>();

// then do this to reset to empty
setDate(undefined);

I will close this issue.

[barrymichaeldoyle]

Agreed, it would be really nice to have a clearable prop which will render a clear button that will set the date to undefined.

[natecalc]

I too would love to see a clear button inside as a prop. Thanks! :)