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