Tiny wrapper component for React-Datepicker to stylistically fit with Chakra-UI 1.x.
<DatePicker selectedDate={myDate} onChange={(d) => console.log(d)} />
Clearable version:
<DatePicker selectedDate={myDate} onChange={(d) => console.log(d)} isClearable={true} />
The HTMLAttributes
interface is included to support passing additional properties like id
, className
, aria-*
, etc., for example:
<FormControl>
<FormLabel htmlFor="published-date">Published Date</FormLabel>
<DatePicker
id="published-date"
selectedDate={publishedDate}
onChange={onChange}
showPopperArrow={true}
/>
<FormHelperText>Date this widget was published</FormHelperText>
</FormControl>
Adapted from this comment
Thanks for all the feedback, I've updated it accordingly. Also added support for
isClearable
I swapped out
BoxProps
forHTMLAttributes<HTMLElement>
since it doesn't make sense to use a Chakra-UI type on a 3rd-party component. The reason that interface is there is to allow settingid
,className
, etc.