Chakra-UI x React-datepicker

Chakra-UI x React-datepicker.md

⚠️ I'd recommend using this fork by @igoro00 which has better theme support.

---

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

date-picker.css

.react-datepicker {
  font-family: unset;
  font-size: 0.9rem;
}

.react-datepicker-wrapper,
.react-datepicker__input-container {
  display: block;
}

.react-datepicker__input-container {
  font-size: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  height: 2.5rem;
  border-radius: 0.25rem;
  border: 1px solid;
  border-color: hsl(0,0%,80%);
}

.react-datepicker__input-container:hover {
  border-color: hsl(0,0%,70%);
}
.react-datepicker__input-container:focus-within {
  z-index: 1;
  border-color: #3182ce;
  box-shadow: 0 0 0 1px #3182ce;
}

.react-datepicker__input-container > input {
  width: 100%;
  height: 100%;
  outline: 0;
}

.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 90px;
}

.react-datepicker__navigation--previous,
.react-datepicker__navigation--next {
  height: 8px;
}

.react-datepicker__navigation--previous {
  border-right-color: #cbd5e0;
}

.react-datepicker__navigation--previous:hover {
  border-right-color: #a0aec0;
}

.react-datepicker__navigation--next {
  border-left-color: #cbd5e0;

}

.react-datepicker__navigation--next:hover {
  border-left-color: #a0aec0;
}

.react-datepicker__header {
  background: #f7fafc;
}

.react-datepicker__header,
.react-datepicker__time-container {
  border-color: #E2E8F0;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  font-size: inherit;
  font-weight: 600;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  margin: 0 1px 0 0;
  height: auto;
  padding: 7px 10px;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  background: #edf2f7;
}

.react-datepicker__day:hover {
  background: #edf2f7;
}

.react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background: #3182ce;
  font-weight: normal;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background: #2a69ac;
}

.react-datepicker__close-icon::after {
  background-color: unset;
  border-radius: unset;
  font-size: 1.5rem;
  font-weight: bold;
  color: hsl(0,0%,80%);
  height: 20px;
  width: 20px;
}

.react-datepicker__close-icon::after:hover {
  color: hsl(0,0%,70%)
}

date-picker.tsx

import React, { HTMLAttributes } from 'react';
import ReactDatePicker from 'react-datepicker';

import 'react-datepicker/dist/react-datepicker.css';
import './date-picker.css';

interface Props {
  isClearable?: boolean;
  onChange: (date: Date) => any;
  selectedDate: Date | undefined;
  showPopperArrow?: boolean;
}

const DatePicker = ({
  selectedDate,
  onChange,
  isClearable = false,
  showPopperArrow = false,
  ...props
}: Props & HTMLAttributes<HTMLElement>) => {
  return (
    <ReactDatePicker
      selected={selectedDate}
      onChange={onChange}
      isClearable={isClearable}
      showPopperArrow={showPopperArrow}
      {...props}
    />
  );
};

export default DatePicker;

It not very darkmode-friendly and it doesn't use chakra's theme(which is kinda the Chakra UI's thing). I fixed it in my fork. I used css variables so the color values could be easily changed globally(the names are not perfect but oh well) and I filled those variables with chakra's theme css variables. I assumed you're using the default theme so I based my colors on that. Its not perfect but for me it's good enough so maybe you'll find it useful too.

Oh, and BTW I didn't do the clock part as I don't use it in my website so some colors might be off and probably text wouldn't be inverted(all you need to do is to find the text class name and set color:var(--text); on it in the css file)

@baumandm I'm getting this typescript error when implementing your code above. Any solutions?

remove typings, change file extension to js/jsx