DatePicker

Date selection component with month/year picker support.

A lot of work should be done regarding this component, for now it's just standard browser's calendar wrapped in a component

Live Demo

Birth Date

Start Date

Month & Year Only

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

Usage

Full Date

<template>
  <orio-date-picker v-model:date="birthDate" label="Birth Date" />
  <orio-date-picker v-model:date="startDate" label="Start Date" />
  <orio-date-picker v-model:date="monthOnly" label="Month & Year Only" month />
</template>

<script setup>
const birthDate = ref("");
const startDate = ref("2024-01-15");
const monthOnly = ref("");
</script>

Month & Year Only

<orio-date-picker
  v-model:date="selectedMonth"
  label="Select Month"
  :month="true"
/>

Props

Prop	Type	Default	Description
date	string	-	Selected date (v-model:date)
label	string	undefined	Label text
month	boolean	false	Month/year picker mode

Events

Event	Payload	Description
update:date	string	Emitted when date changes