@zephinax/react-datepicker-calendar

Beautiful, accessible date picking for React projects.

Ship single, range, or multi-date selection with localization, keyboard support, and guardrails—without styling fights.

Selection modes
Single · Range · Multi
Locales
English · Persian · Custom
Accessibility
Keyboard & ARIA ready
Example.tsx
import DatePicker, { Calendar, utils } from '@zephinax/react-datepicker-calendar';

export function Example() {
  const [value, setValue] = useState(utils('en').getToday());
  return (
    <DatePicker
      value={value}
      onChange={setValue}
      inputPlaceholder="Choose a date"
      shouldHighlightWeekends
    />
  );
}

Try it live

Single-date picker demo

Change the date to see the built-in formatting and popper behavior.

Closes after single selectionKeyboard friendly

Current value

2025/11/30

Locale-aware formatting and weekend highlighting enabled.

Why teams pick this calendar

Built for production UI, focused on usability.

Drop-in DatePicker

Input plus popper with auto-close after single or completed range selections.

Inline Calendar

Embed the grid anywhere and keep the same selection logic for single, range, or multi-date.

Locale aware

English and Persian built-in, with a contract for custom calendars and digits.

Guardrails

Minimum/maximum dates, disabled days, and error callbacks prevent invalid picks.

Design friendly

Small CSS surface with class hooks for today, selection states, and custom days.

Keyboard ready

Arrow keys, Enter selection, focus management, and ARIA labels ship out of the box.

Ready to build?

Dive into the docs and start integrating today.

Go to documentation