@mshafiqyajid/react-date-picker
Headless date picker hook and styled component. Single and range mode, keyboard navigation, min/max date, portal calendar, ARIA-compliant.
Playground #
Props
TSX
import { DatePickerStyled } from "@mshafiqyajid/react-date-picker/styled";
import "@mshafiqyajid/react-date-picker/styles.css";
<DatePickerStyled
value={value}
onChange={setValue}
/>Install #
npm install @mshafiqyajid/react-date-pickerQuick start #
import { DatePickerStyled } from "@mshafiqyajid/react-date-picker/styled";
import "@mshafiqyajid/react-date-picker/styles.css";
const [date, setDate] = useState<Date | null>(null);
<DatePickerStyled value={date} onChange={setDate} tone="primary" />
// Range mode
const [range, setRange] = useState<[Date, Date] | null>(null);
<DatePickerStyled value={range} onChange={setRange} mode="range" />API #
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Date | [Date, Date] | null | — | Controlled value |
| defaultValue | Date | [Date, Date] | null | null | Uncontrolled initial value |
| onChange | (v) => void | — | Called on selection |
| mode | "single" | "range" | "single" | Single date or date range |
| minDate | Date | — | Earliest selectable date |
| maxDate | Date | — | Latest selectable date |
| placeholder | string | "Select date" | Input placeholder |
| format | string | "MMM D, YYYY" | Display format |
| size | "sm" | "md" | "lg" | "md" | Input size |
| tone | "neutral" | "primary" | "neutral" | Color tone |
| disabled | boolean | false | Disable interaction |
| clearable | boolean | false | Show × button to clear selection |
| weekStartsOn | 0–6 | 0 | Day the week starts on (0=Sun) |
| locale | string | "en-US" | Locale for month/day names |
| onMonthChange | (month, year) => void | — | Navigation callback |
| onYearChange | (year) => void | — | Year change callback |
| disabledDates | Date[] | (date) => boolean | — | Dates to disable |