DatePicker

A flexible and advanced date picker component supporting single, range, and multiple date selection, with optional time picking, custom formatting, and full reactivity via Pulse signals. Built on top of Preline's Advanced Datepicker and Vanilla Calendar Pro.

---

Import

import { DatePicker } from '@odyssee/components';

---

Examples

Basic Single Date Picker

Code Éditable

Résultat

---

Date Range Picker

Code Éditable

Résultat

---

With Time Picker

Code Éditable

Résultat

---

Multiple Dates Selection

Code Éditable

Résultat

---

With Date Constraints

Code Éditable

Résultat

---

Custom Date Format

Code Éditable

Résultat

---

Light Theme Only

Code Éditable

Résultat

---

Range Selection with Time

Code Éditable

Résultat

---

Props

Prop	Type	Default	Description
id	string	–	Input element id.
mode	"single" | "multiple" | "range"	"single"	Selection mode: single date, multiple dates, or date range.
value	Date | Signal<Date | null> | null	–	Selected date (single mode). Supports Pulse signals.
rangeStart	Date | Signal<Date | null> | null	–	Start date for range mode. Supports Pulse signals.
rangeEnd	Date | Signal<Date | null> | null	–	End date for range mode. Supports Pulse signals.
placeholder	string	"Select date"	Placeholder text.
minDate	Date	–	Minimum selectable date.
maxDate	Date	–	Maximum selectable date.
showTime	boolean	false	Show time picker.
timeFormat	"12h" | "24h"	"24h"	Time format for time picker.
displayMonths	1 | 2	1 or 2*	Number of months displayed (2 for range mode by default).
dateFormat	string	–	Custom date format string (e.g., "D MMMM YYYY, dddd").
onChange	(date: Date | null) => void	–	Callback when date changes (single mode).
onRangeChange	(start: Date | null, end: Date | null) => void	–	Callback when range changes (range mode).
onMultipleChange	(dates: Date[]) => void	–	Callback when multiple dates change (multiple mode).
className	string	–	Additional CSS classes.
style	string	–	Inline styles.
disabled	boolean	false	Disabled state.
readonly	boolean	true	Readonly state.
theme	"light" | "dark" | "auto"	"auto"	Theme override.

* displayMonths defaults to 2 if mode="range", otherwise 1.

---

Implementation Notes

• Dependencies:
  Requires installation of:

  npm install vanilla-calendar-pro lodash @preline/datepicker

• Reactivity:
  Fully reactive with Pulse signals for all date values.
• Modes:
  • single: select one date.
  • range: select a start and end date (shows two months by default).
  • multiple: select multiple individual dates.
• Time Picker:
  Enable with showTime={true} and choose timeFormat (12h or 24h).
• Formatting:
  Use dateFormat for custom display (see Vanilla Calendar Pro docs).
• Theme:
  Supports "light", "dark", or "auto" (follows system).

---

Accessibility

• The input is a native <input type="text"> with ARIA-friendly attributes.
• Keyboard navigation is supported by Vanilla Calendar Pro.
• Use placeholder to provide context for screen readers.
• Ensure color contrast is sufficient for custom themes.

---

Best Practices

• Use Pulse signals for all controlled values to ensure reactivity.
• For range selection, always provide both rangeStart and rangeEnd as signals.
• Use minDate and maxDate to restrict selectable dates for booking or event scenarios.
• Prefer readonly={true} (default) to prevent manual text editing and ensure calendar UI is used.
• For accessibility, always provide a descriptive placeholder and id if the field is labeled.
• Test with both light and dark themes to ensure visual consistency.

---

Related

• Vanilla Calendar Pro documentation
• Preline Datepicker
• Pulse Framework

---