@imbios/datepicker NPM

Datepicker Component for Chakra-UI

A powerful and simple-to-use datepicker component for web applications, built with date-fns for date management and styled using Chakra-UI, a modular and accessible component library. This README provides all the necessary information to get started, customize the component, and contribute to its development.

Datepicker Component for Chakra-UI

Prerequisites

To integrate the datepicker into your project, ensure you have date-fns and Chakra-UI installed. These libraries are essential for date management and UI styling, respectively.

bun add date-fns

Follow the installation guide for Chakra-UI here to complete the setup.

Installation and Usage

Once the prerequisites are installed, add the datepicker component to your project using:

bun add @imbios/datepicker

Below is an example showcasing how to integrate the datepicker into your application, using Chakra-UI's provider for theming:

TODO: Update below example with newest date library agnostic approach

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

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

  const handleSelectDate = values => setDates(values)

  return (
    <ChakraProvider theme={CalendarDefaultTheme}>
      <Calendar value={dates} onSelectDate={handleSelectDate}>
        <CalendarControls>
          <CalendarPrevButton />
          <CalendarNextButton />
        </CalendarControls>
        <CalendarMonths>
          <CalendarMonth>
            <CalendarMonthName />
            <CalendarWeek />
            <CalendarDays />
          </CalendarMonth>
        </CalendarMonths>
      </Calendar>
    </ChakraProvider>
  )
}

Note: This example displays the calendar without an input field. For integration with inputs and popovers, refer to this detailed example.

Customizing the Datepicker

Customize the Calendar component using Chakra-UI's extendTheme feature. Below is an example showing how to override the default theme:

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

export const theme = extendTheme(CalendarDefaultTheme, {
  components: {
    Calendar: {
      parts: ['calendar'],
      baseStyle: {
        calendar: {
          borderWidth: '6px',
          borderColor: 'pink.400',
          rounded: 'none',
          shadow: 'none',
          boxShadow: '32px 16px 0 6px #3B4DCC',
        },
      },
    },
    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',
          },
        },
      },
    },
  },
})

Theming: Available Components Theme Keys

Key name	Description	Parts
Calendar	A multipart component this is reponsible for the calendar it self.	`calendar`, `months`
CalendarMonth	Responsible to style one month block.	`month`, `name`, `week`, `weekday`, `days`
CalendarDay	Applies styles to individual day. This is the only single part component.	--
CalendarControl	Applies styles to prev and next months.	`controls`, `button`