Date picker with single/range/multiple selection, time, min/max bounds, disabled dates, i18n, presets, multi-month view and keyboard nav.
<link rel="stylesheet" href="https://cdn.get-set.it/gs-datepicker/latest/gs-datepicker.min.css"> <script src="https://cdn.get-set.it/gs-datepicker/latest/gs-datepicker.min.js"></script>
import DatePicker from '@get-set/gs-datepicker'; export default function App() { return ( <DatePicker> <div className="content">Your DatePicker content</div> </DatePicker> ); }
Click the field to open the calendar.
| Option | Type | Default | Description |
|---|---|---|---|
| reference | string | none | Reference. |
| mode | GSDatePickerMode | 'single' | Selection mode. Default: 'single'. |
| defaultValue | DateInput | DateInput[] | null | none | Initial value: a date, an array (multiple), or a [start,end] tuple (range). |
| minDate | DateInput | none | Earliest selectable date (inclusive). |
| maxDate | DateInput | none | Latest selectable date (inclusive). |
| disabledDates | DateInput[] | ((date: Date) => boolean) | none | Disabled dates: an explicit list, or a predicate `(date) => boolean`. |
| disabledDaysOfWeek | number[] | none | Disabled weekdays: array of 0–6 (0 = Sunday). |
| format | string | 'YYYY-MM-DD' | Tokenized display format. Tokens: `YYYY YY MM M DD D HH H hh h mm m ss s A a MMMM MMM dddd ddd`. Default: 'YYYY-MM-DD'. |
| rangeSeparator | string | ' – ' | Separator between the two dates in `range` mode. Default: ' – '. |
| multipleSeparator | string | ', ' | Separator between dates in `multiple` mode. Default: ', '. |
| locale | GSDatePickerLocale | string | none | Full locale object, or a built-in BCP-47-ish key ('en', 'fr', 'de', 'es', 'ar'). |
| firstDayOfWeek | number | none | Override the locale's first day of week (0 = Sunday … 6 = Saturday). |
| time | boolean | GSDatePickerTimeOptions | false | Enable the time picker. `true` = hours + minutes; object for fine control. |
| display | GSDatePickerDisplay | 'popup' | Popup (anchored to the input) or inline (always-open). Default: 'popup'. |
| numberOfMonths | number | 1 | Number of side-by-side months. Default: 1. |
| weekNumbers | boolean | false | Show ISO week numbers in a leading column. Default: false. |
| showOtherMonths | boolean | true | Show leading/trailing days from adjacent months. Default: true. |
| selectOtherMonths | boolean | false | Allow selecting leading/trailing days (requires `showOtherMonths`). Default: false. |
| showDropdowns | boolean | true | Show the year + month dropdown navigation. Default: true. |
| yearRange | number | [number, number] | 10 | Range of years offered in the year dropdown: [min, max] or +/- span. Default: 10. |
| presets | boolean | Array<GSDatePickerPresetId | GSDatePickerPreset> | false | Built-in preset ids, custom presets, or `true` for the sensible default set. |
| position | GSDatePickerPosition | 'auto' | Popup placement (auto-flips when 'auto'). Default: 'auto'. |
| closeOnSelect | boolean | none | Close the popup after a (final) selection. Default: true (single), false (range/multiple). |
| openOnFocus | boolean | true | Open the popup on input focus. Default: true. |
| readOnly | boolean | false | Render the input read-only (typing disabled, picker only). Default: false. |
| allowInput | boolean | true | Parse user-typed text back into a date. Default: true. |
| clearable | boolean | true | Show a clear (×) button on the control. Default: true. |
| placeholder | string | none | Placeholder text for the input. |
| animation | GSDatePickerAnimation | false | 'scale' | Open/close animation name. `false` disables motion. Default: 'scale'. |
| animationDuration | number | 200 | Animation duration in ms. Default: 200. |
| animationEasing | string | 'cubic-bezier(.34,1.4,.5,1)' | CSS easing for the open/close animation. |
| reducedMotion | 'auto' | boolean | 'auto' | Honor prefers-reduced-motion. 'auto' | true | false. Default: 'auto'. |
| theme | GSDatePickerTheme | 'auto' | Visual theme. `auto` follows prefers-color-scheme. Default: 'auto'. |
| accentColor | string | none | Accent color (CSS var --gsd-accent) for the selected / today markers. |
| size | GSDatePickerSize | 'md' | Control + calendar size. Default: 'md'. |
| rtl | boolean | false | Right-to-left layout. Default: false. |
| customClass | GSDatePickerCustomClass | none | Per-part class overrides. |
| className | string | none | Extra class name applied to the calendar root. |
Pick a day, a range, or many dates.
Optional time selection alongside dates.
Quick shortcuts like “Last 7 days”.
Localized months, weekdays and first-day.