[](https://github.com/react-datepicker/useCalendar/actions/workflows/ci.yml)
npm install @react-datepicker/ui#### 🚀 Features
- ✨ Single & Range Selection: Use the hook and components for both single-date and date-range selection.
- 🎨 Fully Customizable: Complete control over styling to match your app’s unique design.
- ♿ ARIA Support: Accessibility-first design to ensure your datepickers are user-friendly for everyone.
- 🌍 Locale Support: Easily configure for different languages and regions.
---
#### Installation
``bash`
npm install react-datepicker/ui
#### Basic Usage
Components
DatePicker
`tsx
import { useState } from "react";
import DatePicker from "@react-datepicker/ui";
function App() {
const [date, setDate] = useState
return
}
export default App;
`
RangeDatePicker
`tsx
import { useState } from "react";
import { RangeDatePicker, DateRange } from "@react-datepicker/ui";
function App() {
const [date, setDate] = useState
return (
);
}
export default App;
``
Hook - Uncontrolledtsx
import { useCalendar } from "@react-datepicker/ui";
const {
value, // rangeValue for date range when isDateRange is true
displayedMonths,
register,
nextMonth,
previousMonth,
weekDays,
shouldHighlightDay,
isSelected,
setYear,
} = useCalendar(
{ numberOfDisplayedMonths: 2 },
);
`
##### Hook - Controlled
`tsx
import { useCalendar } from "@react-datepicker/ui";
const {
displayedMonths,
register,
nextMonth,
previousMonth,
weekDays,
shouldHighlightDay,
isSelected,
setYear,
} = useCalendar(
{ numberOfDisplayedMonths: 2 },
// For controlled usage - pass value and onChange to the hook
value,
(date) => onChange(date)
);
``
Refer to the Documentation for detailed usage examples and customization options.