Documentation

Date Picker

Calendar date selection with single date and date range support.

Installation

pnpm add @rouf-dev/pantheon-ui react-day-picker

Usage

Single Date

import { DatePicker } from "@rouf-dev/pantheon-ui";
import { useState } from "react";

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

<DatePicker
  date={date}
  onDateChange={setDate}
  placeholder="Pick a date"
  clearable
/>

Date Range

import { DateRangePicker } from "@rouf-dev/pantheon-ui";
import { useState } from "react";

const [dateRange, setDateRange] = useState<{
  from?: Date;
  to?: Date;
}>();

<DateRangePicker
  dateRange={dateRange}
  onDateRangeChange={setDateRange}
  placeholder="Pick a date range"
  clearable
/>

With Date Limits

<DatePicker
  date={date}
  onDateChange={setDate}
  fromDate={new Date()}
  toDate={addDays(new Date(), 30)}
  placeholder="Next 30 days only"
/>

Features

  • Single date or date range selection
  • Custom date format with date-fns
  • Min/max date restrictions with fromDate and toDate
  • Clearable dates with clearable prop
  • Disabled dates support
  • Fully accessible with keyboard navigation