@usevyre/react @usevyre/vue

Date Picker

An input trigger that opens a Calendar in a popover. Forwards all Calendar props and supports the same single / range / multiple modes. The popover closes automatically after selection. For an always-visible grid use Calendar; for start/end ranges with presets and a dual-month view use DateRangePicker.

Basic

Render a controlled DatePicker with value and onChange (or v-model in Vue). Set mode="range" for a start–end selection; the popover closes once both dates are picked.

Single date

Pick a date

Date range

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

No date selected

<DatePicker value={date} onChange={setDate} showTime />

<DatePicker v-model="date" :show-time="true" />

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.

AI Context

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 />

← Data Grid Date Range Picker →