DatePicker

Popular

Calendar dropdown for date selection.

formdateinput

Import

import { DatePicker } from "@/components/ui";

Basic Usage

DatePicker Preview

Select a date

Code

tsx

const [date, setDate] = useState<Date | null>(null);

return (
  <DatePicker
    value={date}
    onChange={setDate}
    placeholder="Select date"
  />
);

With Range

Set min/max date range

1<DatePicker
2  value={date}
3  onChange={setDate}
4  minDate={new Date()}
5  maxDate={addDays(new Date(), 30)}
6  placeholder="Select date (next 30 days)"
7/>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring

DatePicker

Popular

Calendar dropdown for date selection.

formdateinput

Import

import { DatePicker } from "@/components/ui";

Basic Usage

DatePicker Preview

Select a date

Code

tsx

const [date, setDate] = useState<Date | null>(null);

return (
  <DatePicker
    value={date}
    onChange={setDate}
    placeholder="Select date"
  />
);

With Range

Set min/max date range

1<DatePicker
2  value={date}
3  onChange={setDate}
4  minDate={new Date()}
5  maxDate={addDays(new Date(), 30)}
6  placeholder="Select date (next 30 days)"
7/>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring