@yamatomo/chakra-react-datepicker v1.0.0

chakra react datepicker

Integration of chakra-ui and react-datepicker

storybook

getting started

yarn add @yamatomo/chakra-react-datepicker react-datepicker

If you use typescript, also install the following packages.

yarn add -D @types/react-datepicker

You also need chakra-ui. See the docs for the installation

usage

import { DatePicker } from '@yamatomo/chakra-react-datepicker';

import 'react-datepicker/dist/react-datepicker.css';
// or using CSS Modules
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';

const Component = (props) => (
  <DatePicker {...props} />
);

Usage is the same as react-datepicker. See the docs for details.

theme

You can customize the datepicker style with extendDatePickerTheme props.

<DatePicker
  extendDatePickerTheme={(colorMode, theme) => {
    if (colorMode === 'light') {
      // customize header and outside day color
      return { ...theme, header: 'pink.400', outsideDay: '#828282' };
    }

    // dark mode color
    return ...
  }}
/>  

default theme

props