@rozie-ui/date-picker-vue

@rozie-ui/date-picker-vue

Idiomatic vue DatePicker — a headless, fully-accessible (WAI-ARIA) single-date calendar (a month grid with leading/trailing spill, prev/next month navigation, weekStartsOn rotation, min/max/disabledDates gating, roving keyboard focus, and localized Intl labels) compiled from one Rozie source. It is HEADLESS: accept the default token-themed calendar, or override the month-nav header via the scoped slot. Every visual value is a CSS custom property, so it re-skins to any design system. This package is generated; do not edit src/ by hand.

Install

npm i @rozie-ui/date-picker-vue

Peer dependencies: vue. Install them alongside this package.

Also installed: @rozie/runtime-vue — Rozie's small, tree-shaken runtime helper package (controllable state, keyboard navigation, event modifiers, and safe interpolation). It arrives as a regular dependency, so npm pulls it for you. Your bundler keeps only the helpers this component actually uses — typically a few hundred bytes to a few KB, minified and gzipped. What's in it and what it costs.

Usage

<script setup lang="ts">
import { ref } from 'vue';
import DatePicker from '@rozie-ui/date-picker-vue';

const date = ref(''); // ISO YYYY-MM-DD, '' = no selection
function onChange(e: { value: string }) {
  console.log('picked:', e.value);
}

// Range mode: value becomes a { start, end } object.
const range = ref({ start: '', end: '' });
const iso = (d: Date) => d.toISOString().slice(0, 10);
const presetRanges = [
  { label: 'Q1 2026', range: { start: '2026-01-01', end: '2026-03-31' } },
  // a () => { start, end } thunk is resolved fresh on render
  { label: 'Last 7 days', range: () => ({ start: iso(new Date(Date.now() - 6 * 864e5)), end: iso(new Date()) }) },
];
</script>

<template>
  <DatePicker v-model:value="date" min="2026-01-01" @change="onChange" />

  <!-- Custom header via the scoped #header slot -->
  <DatePicker v-model:value="date">
    <template #header="{ label, prev, next }">
      <div class="my-header">
        <button @click="prev">Prev</button>
        <strong>{{ label }}</strong>
        <button @click="next">Next</button>
      </div>
    </template>
  </DatePicker>

  <!-- Range selection with quick-pick presets + a #presets override -->
  <DatePicker
    selectionMode="range"
    v-model:value="range"
    :presetRanges="presetRanges"
    @rangeComplete="(e) => console.log('range:', e.value)"
  >
    <template #presets="{ presets, apply }">
      <button v-for="p in presets" :key="p.label" @click="apply(p.range)">{{ p.label }}</button>
    </template>
  </DatePicker>

  <!-- showFooter renders a default Today / Clear row; #footer overrides it -->
  <DatePicker v-model:value="date" show-footer />
</template>

Theming

Every visual value is a --rozie-datepicker-* CSS custom property — override any of them at any ancestor scope. Ready-made design-system bridges ship in the package:

import '@rozie-ui/date-picker-vue/themes/shadcn.css';    // or material.css, bootstrap.css, base.css

Props

Events

Imperative handle

Beyond props, the component exposes imperative methods (declared once in the Rozie source via $expose). Grab a handle with the native ref mechanism and call them directly:

<script setup>
import { ref } from 'vue';
const picker = ref();          // template ref
</script>

<template>
  <DatePicker ref="picker" v-model:value="date" />
  <button @click="picker.goToToday()">Today</button>
</template>

Slots