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

key	light mode value	dark mode value
gray100	gray.100	gray.700
gray200	gray.200	gray.600
gray300	gray.300	gray.500
gray400	gray.400	gray.400
gray500	gray.500	gray.400
color300	blue.300	blue.200
color500	blue.500	blue.300
color600	blue.600	blue.500
header	white	gray.700
text	gray.800	whiteAlpha.900
negativeText	whiteAlpha.900	whiteAlpha.900
monthBackground	white	gray.700
outsideDay	#9f9696	#9f9696

props

name	type	description
...react-datepicker props	ReactDatePickerProps	react-datepicker props (Does not support todayButton, will be ignored)
rootProps	undefined | BoxProps	for root element props
inputProps	undefined | Omit<InputProps, 'isDisabled' | 'onChange'>	input props
datePickerSize	undefined | ResponsiveValue<'xs' | 'sm' | 'md' | 'xl'>	datepicker size. supported responsive styles
datePickerColorSchema	undefined | "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
extendDatePickerTheme	undefined | (colorMode: 'light' | 'dark', theme: DatePickerTheme) => DatePickerTheme