@usevyre/react @usevyre/vue

Calendar

A flexible date picker supporting single date, date range, and multiple date selection. Use Calendar for an always-visible grid or DatePicker for an input-triggered popover. Includes month/year navigation, time picker, and min/max/disabled constraints. Zero dependencies — built on native Intl APIs.

Single date

Default mode. Click any day to select it. Click again to deselect.

import { Calendar } from "@usevyre/react";

const [date, setDate] = useState<Date | null>(null);

<Calendar mode="single" value={date} onChange={setDate} />

<script setup>
import { Calendar } from "@usevyre/vue";
const date = ref(null);
</script>
<template>
  <Calendar mode="single" v-model="date" />
</template>

Date range

Set mode="range". First click sets the start date, second click sets the end. Hover previews the range before confirming.

import { Calendar } from "@usevyre/react";

const [range, setRange] = useState<[Date | null, Date | null]>([null, null]);

<Calendar mode="range" value={range} onChange={setRange} />

<script setup>
import { Calendar } from "@usevyre/vue";
const range = ref([null, null]);
</script>
<template>
  <Calendar mode="range" v-model="range" />
</template>

With time picker

Add showTime to include an HH:MM input below the grid. The time is stored in the same Date object.

import { Calendar } from "@usevyre/react";

const [date, setDate] = useState<Date | null>(null);

<Calendar mode="single" showTime value={date} onChange={setDate} />

<script setup>
import { Calendar } from "@usevyre/vue";
const date = ref(null);
</script>
<template>
  <Calendar mode="single" :show-time="true" v-model="date" />
</template>

DatePicker — input + popover

DatePicker wraps Calendar in a trigger button that opens a popover. All Calendar props are forwarded. The popover closes automatically after selection (or when both range dates are picked).

Single date

Date range

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

Props — Calendar

Props

Prop	Type	Default	Description
`mode`	`"single" \| "range" \| "multiple"`	`"single"`	Selection mode. single picks one date, range picks start–end, multiple picks any number of dates.
`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.
`showTime`	`boolean`	`false`	Adds an HH:MM time picker below the calendar grid.
`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.
`class / className`	`string`	`—`	Additional CSS class on the root element.

Props — DatePicker

Props

Prop	Type	Default	Description
`+ Calendar props`	`—`	`—`	All Calendar props are forwarded.
`placeholder`	`string`	`"Pick a date"`	Placeholder text shown when no date is selected.
`inputClass / inputClassName`	`string`	`—`	Additional CSS class on the trigger button.

AI Context

Valid props

Prop	Values	Default
`disabled`	`true`\|`false`	`false`

Common AI mistakes

Using Calendar for time selection→ Combine with a separate time Input if time selection is needed

Quick examples

Controlled date picker

const [date, setDate] = useState(null);
<Calendar value={date} onChange={setDate} />

← Button Card →