Date Picker
An input trigger that opens a Calendarin a popover. Forwards all Calendar props and supports the samesingle / range / multiple modes. The popover closes automatically after selection. For an always-visible grid useCalendar; for start/end ranges with presets and a dual-month view useDateRangePicker.
Basic
Render a controlled DatePicker with value andonChange (or v-model in Vue). Set mode="range"for a start–end selection; the popover closes once both dates are picked.
Pick a date
Pick a range
import { useState } from "react";
import { DatePicker } from "@usevyre/react";
const [date, setDate] = useState<Date | null>(null);
const [range, setRange] = useState<[Date | null, Date | null]>([null, null]);
// Single
<DatePicker mode="single" value={date} onChange={setDate} placeholder="Pick a date" />
// Range
<DatePicker mode="range" value={range} onChange={setRange} placeholder="Pick a range" /><script setup>
import { ref } from "vue";
import { DatePicker } from "@usevyre/vue";
const date = ref(null);
const range = ref([null, null]);
</script>
<template>
<!-- Single -->
<DatePicker mode="single" v-model="date" placeholder="Pick a date" />
<!-- Range -->
<DatePicker mode="range" v-model="range" placeholder="Pick a range" />
</template>With time
Add showTime to include an HH:MM input in the popover. The time is stored in the same Date object as the selected day.
Pick date & time
<DatePicker value={date} onChange={setDate} showTime /><DatePicker v-model="date" :show-time="true" />Props
Props
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "single" | "range" | "multiple" | "single" | Selection mode. The value/onChange shape matches the mode. |
value / v-model | Date | [Date|null, Date|null] | Date[] | — | Controlled selected value. Type depends on mode. |
onChange / @update:modelValue | (v) => void | — | Called when the selection changes. |
placeholder | string | "Pick a date" | Text shown on the trigger when nothing is selected. |
showTime | boolean | false | Adds an HH:MM time picker (single mode). |
minDate | Date | — | Dates before this are disabled. |
maxDate | Date | — | Dates after this are disabled. |
disabled | (date: Date) => boolean | — | Custom callback to disable specific dates. |
weekStartsOn | 0 | 1 | 1 | First day of the week. 0 = Sunday, 1 = Monday. |
inputClass / inputClassName | string | — | Additional CSS class on the trigger button. |
Valid props
| Prop | Values | Default |
|---|---|---|
mode | "single"|"range"|"multiple" | single |
weekStartsOn | "0"|"1" | 1 |
showTime | true|false | false |
Common AI mistakes
- DatePicker mode="range" for { from, to } object→ Use <DateRangePicker /> for the { from, to } object API + presets + dual month
- DatePicker without value/onChange→ Provide value and onChange (e.g. from useState)
Quick examples
Single date field
const [date, setDate] = useState(null);
<DatePicker value={date} onChange={setDate} placeholder="Pick a date" />Date + time
<DatePicker value={date} onChange={setDate} showTime />