DatePicker

Single-date picker built on top of Calendar. Renders as a button trigger that opens a popover with the calendar.

Live Demo

Birth Date

Start Date

Selected dates:
Birth: (not selected)
Start: 2024-01-15

Usage

<template>
  <orio-date-picker v-model="birthDate" label="Birth Date" />
</template>

<script setup>
const birthDate = ref(null);
</script>

Props

Inherits all ControlProps (label, size, layout, error, ...).

Prop	Type	Default	Description
placeholder	string	i18n string	Trigger text when nothing selected
min	string | null	null	ISO YYYY-MM-DD lower bound
max	string | null	null	ISO YYYY-MM-DD upper bound
markers	CalendarMarker[]	[]	Highlight ranges — passed through to Calendar
getMarker	(iso) => CalendarMarker | null	—	Per-day marker callback
isDisabled	(iso) => boolean	—	Extra disabled predicate, combined with min / max

See Calendar for the CalendarMarker type and resolution rules.

v-model

string | null — ISO YYYY-MM-DD date string.

Events

Event	Payload	Description
update:modelValue	string | null	Emitted when date changes