Drop-in DatePicker
Input plus popper with auto-close after single or completed range selections.
Ship single, range, or multi-date selection with localization, keyboard support, and guardrails—without styling fights.
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
Change the date to see the built-in formatting and popper behavior.
Current value
2025/11/30
Locale-aware formatting and weekend highlighting enabled.
Why teams pick this calendar
Input plus popper with auto-close after single or completed range selections.
Embed the grid anywhere and keep the same selection logic for single, range, or multi-date.
English and Persian built-in, with a contract for custom calendars and digits.
Minimum/maximum dates, disabled days, and error callbacks prevent invalid picks.
Small CSS surface with class hooks for today, selection states, and custom days.
Arrow keys, Enter selection, focus management, and ARIA labels ship out of the box.
Ready to build?