Datepckr 📅

A lightweight, customizable, and accessible date picker component library for React. Supports single date selection, date ranges, localization, and seamless integration with any UI framework.

Installation

npm install datepckr
# или
yarn add datepckr
# или
pnpm add datepckr

Quick start

import { DateRangePicker } from 'datepckr'

function MyComponent() {
  const [dates, setDates] = useState([new Date(), new Date()])

  return <DateRangePicker dates={dates} onChange={(newDates) => setDates(newDates)} />
}

Core components

DateRangePicker

The main component for selecting date ranges:

import { DateRangePicker } from 'datepckr'

return (
  <DateRangePicker
    dates={[startDate, endDate]}
    onChange={(newDates) => {
      // Handle date change
      console.log('Selected dates:', newDates)
    }}
    locale="en-US" // Optional: localization
    minDate={new Date(2020, 0, 1)} // Optional: minimum selectable date
    maxDate={new Date(2030, 11, 31)} // Optional: maximum selectable date
  />
)

DatePicker

import { DatePicker } from 'datepckr'

return <DatePicker date={selectedDate} onChange={(newDate) => setSelectedDate(newDate)} />

Integration Examples

With Material-UI (MUI)

Perfect integration with MUI's Menu component:

import { useState } from 'react'
import { IconButton, Menu } from '@mui/material'
import { CalendarMonthOutlined } from '@mui/icons-material'
import { DateRangePicker } from 'datepckr'

function DatePickerWithMenu() {
  const [anchorEl, setAnchorEl] = useState(null)
  const [dateRange, setDateRange] = useState([startDate, endDate])

  return (
    <>
      <IconButton
        color="secondary"
        onClick={(e) => setAnchorEl(e.currentTarget)}
        aria-label="Open date picker"
      >
        <CalendarMonthOutlined />
      </IconButton>

      <Menu
        open={!!anchorEl}
        anchorEl={anchorEl}
        variant="menu"
        onClose={() => setAnchorEl(null)}
        PaperProps={{
          style: {
            padding: '16px',
            minWidth: '320px',
          },
        }}
      >
        <DateRangePicker
          dates={dateRange}
          onChange={(newDates) => {
            setDateRange(newDates)
            // Optionally close menu after selection
            // setAnchorEl(null);
          }}
        />
      </Menu>
    </>
  )
}

With Form State Management

import { useForm } from 'react-hook-form'
import { DateRangePicker } from 'datepckr'

function FilterForm() {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      dateRange: [new Date(), new Date()],
    },
  })

  const onSubmit = (data) => {
    console.log('Selected date range:', data.dateRange)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <DateRangePicker
        dates={dateRange}
        onChange={(dates) => {
          // Update your form state here
        }}
      />
      <button type="submit">Apply Filter</button>
    </form>
  )
}

Customization

Theme Customization

Datepckr supports CSS custom properties for easy theming:

.datepckr {
  --datepckr-primary: #1976d2;
  --datepckr-primary-hover: #1565c0;
  --datepckr-text: #333333;
  --datepckr-background: #ffffff;
  --datepckr-border: #e0e0e0;
  --datepckr-border-radius: 8px;
  --datepckr-font-family: 'Roboto', sans-serif;
}

Custom Styling with CSS Modules

import styles from './CustomDatePicker.module.css'
import { DateRangePicker } from 'datepckr'

return <DateRangePicker dates={dates} onChange={setDates} className={styles.customPicker} />

/* CustomDatePicker.module.css */
.customPicker {
  border: 2px solid #4caf50;
  border-radius: 12px;
  padding: 12px;
}

.customPicker :global(.datepckr-day-slot-selected) {
  background-color: #4caf50;
  color: white;
}

Localization

import { DateRangePicker } from 'datepckr';
import { ru, enUS, fr, de, ja } from 'date-fns/locale'

// Russian
<DateRangePicker locale={ru} />

// English (United States)
<DateRangePicker locale={enUS} />

// German (Germany)
<DateRangePicker locale={de} />

// French (France)
<DateRangePicker locale={fr} />

// Japanese (Japan)
<DateRangePicker locale={ja} />

Made with ❤️ by Gena Baibara