You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Datepicker only allows to receive a valid Date but it would be really great if we could set null, "" or any kind of value that represents empty.
Context
So, i was working in specific use case where users can set a Date but this field is optional (null under the hood), so the user can also keep it empty.
When i start this i saw Clear button and i tought this was exactly what i was looking for but then i realize that this button only resets the field to defaultDate or minDate but never to "" (as native input does) or null. Since Clear button resets to defaultDate, would be great if defaultDate accepts null or even if onSeletedDateChanged could receive the current value and a second boolean prop like isClearAction so we can customize the logic.
For now, since im using React Hook Form to deal with validations, i've reached this by using the following approach:
typeMyDatepickerProps=Omit<DatepickerProps,'showClearButton'|'labelClearButton'>&{onClear?: ()=>void;};constMyDatepicker=forwardRef<DatepickerRef,MyDatepickerDatepickerProps>(({ onClear, ...rest},ref)=>{return(<div><Datepickerref={ref}{...rest}showClearButton={!onClear}labelClearButton="Reset"/>{onClear&&(<buttononClick={onClear}type="button">{/* This is just a X icon for the button */}<HiXCircle/></button>)}</div>);});
And in the form (remember: im using React Hook Form):
<Controllercontrol={control}name="my-field"render={({ field })=>(<MyDatepickerminDate={newDate()}value={field.value===null ? '' : field.value?.toDateString()}placeholder="Date"onSelectedDateChanged={field.onChange}onClear={()=>field.onChange(null)}/>)}/>;
As you can see, im not using default onChange since it not triggers with current value. Thats why im using Controller to customize field actions.
Would be very very good to have this behavior on this component 🥺
EDIT: I've already read some issues about that but this is a feature request since it is not implemented.
The text was updated successfully, but these errors were encountered:
Summary
Datepicker only allows to receive a valid Date but it would be really great if we could set
null
,""
or any kind of value that represents empty.Context
So, i was working in specific use case where users can set a Date but this field is optional (null under the hood), so the user can also keep it empty.
When i start this i saw Clear button and i tought this was exactly what i was looking for but then i realize that this button only resets the field to
defaultDate
orminDate
but never to""
(as native input does) ornull
. Since Clear button resets todefaultDate
, would be great if defaultDate acceptsnull
or even ifonSeletedDateChanged
could receive the current value and a second boolean prop likeisClearAction
so we can customize the logic.For now, since im using React Hook Form to deal with validations, i've reached this by using the following approach:
And in the form (remember: im using React Hook Form):
As you can see, im not using default
onChange
since it not triggers with current value. Thats why im usingController
to customize field actions.Would be very very good to have this behavior on this component 🥺
EDIT: I've already read some issues about that but this is a feature request since it is not implemented.
The text was updated successfully, but these errors were encountered: