Date Picker
A flexible date picker component with calendar popup and various configuration options.
Installation
Install the component:
npx natively-ui add datepickerUsage
DatePickerDemo.jsx
1import { DatePicker } from '@/components/ui/datepicker';
2
3export default function MyComponent() {
4 const [selectedDate, setSelectedDate] = useState();
5
6 return (
7 <DatePicker
8 value={selectedDate}
9 onValueChange={setSelectedDate}
10 placeholder="Select a date"
11 />
12 );
13}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Date | - | Controlled value of the date picker. |
| defaultValue | Date | - | Default value for uncontrolled usage. |
| onValueChange | (date: Date | undefined) => void | - | Function called when the selected date changes. |
| disabled | boolean | false | Whether the date picker is disabled. |
| placeholder | string | 'Select date' | Placeholder text when no date is selected. |
| className | string | "" | Additional CSS classes for the date picker container. |
| buttonClassName | string | "" | Additional CSS classes for the trigger button. |
| calendarClassName | string | "" | Additional CSS classes for the calendar popup. |
| disabledDates | Date[] | [] | Array of dates that should be disabled for selection. |
| minDate | Date | - | Minimum selectable date. |
| maxDate | Date | - | Maximum selectable date. |
Features
- Controlled and uncontrolled component patterns
- Calendar popup with month/year navigation
- Today's date highlighting
- Disabled dates support
- Min/max date range restrictions
- Customizable styling with className props
- Responsive calendar sizing
- Accessibility support with proper labels
- Built with React Native and Expo Vector Icons
Examples
Basic Usage
DatePickerDemo.jsx
1const [selectedDate, setSelectedDate] = useState();
2
3<DatePicker
4 value={selectedDate}
5 onValueChange={setSelectedDate}
6 placeholder="Choose a date"
7/>Uncontrolled
DatePickerDemo.jsx
1<DatePicker
2 defaultValue={new Date()}
3 onValueChange={(date) => console.log('Selected:', date)}
4 placeholder="Select date"
5/>Date Range Restrictions
DatePickerDemo.jsx
1const today = new Date();
2const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
3
4<DatePicker
5 value={selectedDate}
6 onValueChange={setSelectedDate}
7 minDate={today}
8 maxDate={nextMonth}
9 placeholder="Select date within range"
10/>Disabled Dates
DatePickerDemo.jsx
1const today = new Date();
2const tomorrow = new Date(today);
3tomorrow.setDate(today.getDate() + 1);
4
5const disabledDates = [
6 today,
7 tomorrow,
8 new Date(2024, 11, 25), // Christmas
9];
10
11<DatePicker
12 value={selectedDate}
13 onValueChange={setSelectedDate}
14 disabledDates={disabledDates}
15 placeholder="Select available date"
16/>Custom Styling
DatePickerDemo.jsx
1<DatePicker
2 value={selectedDate}
3 onValueChange={setSelectedDate}
4 className="mb-4"
5 buttonClassName="border-blue-500 bg-blue-50"
6 calendarClassName="border-2 border-blue-200"
7 placeholder="Custom styled picker"
8/>Disabled State
DatePickerDemo.jsx
1<DatePicker
2 value={selectedDate}
3 onValueChange={setSelectedDate}
4 disabled={true}
5 placeholder="Disabled date picker"
6/>