@finofo/datepicker

A React datepicker component built on Chakra UI with pluggable date adapters (dayjs or date-fns). Forked from hiwllc/datepicker.

Requirements

• React 17 or 18
• Chakra UI v2
• A date adapter: dayjs (recommended) or date-fns v2

Installation

pnpm add @finofo/datepicker
# or
npm install @finofo/datepicker

Make sure peer dependencies are installed:

pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion react react-dom dayjs

If you plan to use the date-fns adapter instead, also install date-fns@^2.

Usage

Wrap your app with CalendarAdapterProvider and pass a date adapter. Then compose the calendar using the compound component API.

import { ChakraProvider, extendTheme } from '@chakra-ui/react'
import {
  Calendar,
  CalendarAdapterProvider,
  AdapterDayjs,
  CalendarDefaultTheme,
  CalendarControls,
  CalendarPrevButton,
  CalendarNextButton,
  CalendarMonths,
  CalendarMonth,
  CalendarMonthName,
  CalendarWeek,
  CalendarDays,
} from '@finofo/datepicker'
import { useState } from 'react'

const theme = extendTheme(CalendarDefaultTheme)

export function App() {
  const [dates, setDates] = useState()

  return (
    <ChakraProvider theme={theme}>
      <CalendarAdapterProvider adapter={AdapterDayjs}>
        <Calendar value={dates} onSelectDate={setDates}>
          <CalendarControls>
            <CalendarPrevButton />
            <CalendarNextButton />
          </CalendarControls>

          <CalendarMonths>
            <CalendarMonth>
              <CalendarMonthName />
              <CalendarWeek />
              <CalendarDays />
            </CalendarMonth>
          </CalendarMonths>
        </Calendar>
      </CalendarAdapterProvider>
    </ChakraProvider>
  )
}

The example above renders the calendar directly. For usage with an input + popover, see the stories in stories/calendar.stories.tsx.

Using the date-fns adapter

If you prefer date-fns over dayjs:

import { AdapterDateFns } from '@finofo/datepicker/adapters/AdapterDateFns'

<CalendarAdapterProvider adapter={AdapterDateFns}>
  {/* ... */}
</CalendarAdapterProvider>

Import paths

The recommended import is from the package root:

import { Calendar, AdapterDayjs, CalendarDefaultTheme } from '@finofo/datepicker'

A legacy subpath is also supported for backward compatibility:

import { AdapterDayjs } from '@finofo/datepicker/dist/adapters/AdapterDayjs'

Customizing

Customize the calendar using Chakra UI's extendTheme. Override the component keys listed below.

import { extendTheme } from '@chakra-ui/react'
import { CalendarDefaultTheme } from '@finofo/datepicker'

export const theme = extendTheme(CalendarDefaultTheme, {
  components: {
    Calendar: {
      parts: ['calendar'],
      baseStyle: {
        calendar: {
          borderWidth: '6px',
          borderColor: 'pink.400',
          rounded: 'none',
          shadow: 'none',
        },
      },
    },

    CalendarControl: {
      parts: ['button'],
      baseStyle: {
        button: {
          h: 6,
          px: 2,
          rounded: 'none',
          fontSize: 'sm',
          color: 'white',
          bgColor: 'pink.400',
          _hover: { bgColor: 'pink.200' },
          _focus: { outline: 'none' },
        },
      },
    },
  },
})

Theme component keys

| Key name | Description | Parts | |-----------------|--------------------------------------------------|-------------------------------------------| | Calendar | The calendar container and month grid. | calendar, months | | CalendarMonth | A single month block. | month, name, week, weekday, days| | CalendarDay | Individual day cell (single-part component). | -- | | CalendarControl | Previous/next month navigation. | controls, button |

Development

pnpm install
pnpm run build        # build dist/ via tsup
pnpm run lint         # eslint (flat config)
pnpm test             # jest
pnpm run storybook    # storybook dev server

License

Apache-2.0