@gigerit/vuetify-date-input-advanced

Demo

Features

Multi-month picker with range selection by default
Single-date mode with :range="false"
Inline picker or input-triggered overlay
Desktop menu and mobile fullscreen dialog behavior in VAdvancedDateInput
Vuetify-styled split start/end inputs in range mode
Typed input parsing and validation
Controlled v-model:text support with draft-state events
Configurable overlay draft close strategies: revert, preserve, or commit
Exposed input instance API for parent-driven validate / commit / revert flows
Optional picker-only single-date mode with inputReadonly
Built-in range presets plus custom preset slots
min, max, allowedDates, allowedStartDates, and allowedEndDates constraints
Configurable week start via firstDayOfWeek
Optional week numbers
Keyboard navigation and live announcements
Theme-aware styling with CSS custom properties and optional Sass variables

Advanced date selection components for Vuetify 4.

@gigerit/vuetify-date-input-advanced provides two components:

VAdvancedDatePicker: a standalone multi-month calendar panel
VAdvancedDateInput: a typed input wrapper that adds overlay behavior and the same picker surface

The components use Vuetify's active date adapter through useDate(), so locale, formatting, and runtime value types follow your app's Vuetify date configuration.

Exports

Export	Description
`AdvancedDatePlugin`	Registers both components globally
`VAdvancedDateInput`	Text field wrapper + picker
`VAdvancedDatePicker`	Standalone picker panel
`dateInputAdvancedEn`, `dateInputAdvancedCs`, `dateInputAdvancedDe`, `dateInputAdvancedFr`, `dateInputAdvancedIt`, `dateInputAdvancedLt`	Built-in locale message bundles
`AdvancedDateModel`, `PresetRange`, `AdvancedDateAdapter`, `AdvancedDateDay`, `AdvancedDateMonthData`, `AdvancedDateWeek`, `DateBounds`, `NormalizedRange`, `DateInputAdvancedLocaleMessages`, `AdvancedDateIconValue`, `AdvancedDateIconSvgPath`, `AdvancedDateInputField`, `AdvancedDateInputFieldProps`	Core public TypeScript types
`AdvancedDateInputDraft`, `AdvancedDateInputPublicInstance`, `AdvancedDateInputCommitPayload`, `AdvancedDateInputInvalidPayload`, `AdvancedDateInputClosePayload`, `AdvancedDateInputSource`, `AdvancedDateInputParseStatus`, `AdvancedDateInputAvailabilityStatus`, `AdvancedDateInputValidationStatus`, `AdvancedDateInputCloseStrategy`	Text-input draft and public-handle contracts

Requirements

vue@^3.5.0
vuetify@^4.0.0
A Vuetify app already configured in your project, including any official Vuetify icon setup you want to use

Default component icons use Vuetify aliases ($calendar, $prev, and $next), so they resolve through the same icon configuration as native Vuetify components.

Install

npm install vue vuetify
npm install @gigerit/vuetify-date-input-advanced

Import the stylesheet once in your app entry:

import '@gigerit/vuetify-date-input-advanced/style.css'

Register the components globally:

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'

import { AdvancedDatePlugin } from '@gigerit/vuetify-date-input-advanced'
import '@gigerit/vuetify-date-input-advanced/style.css'

createApp(App).use(vuetify).use(AdvancedDatePlugin).mount('#app')

If you prefer local registration, import VAdvancedDateInput and VAdvancedDatePicker directly instead of using AdvancedDatePlugin.

Styling

For the default styling path, import the prebuilt stylesheet once:

import '@gigerit/vuetify-date-input-advanced/style.css'

If you need compile-time customization, compile the package Sass entry instead of importing style.css:

@use '@gigerit/vuetify-date-input-advanced/styles' with (
  $advanced-date-picker-cell-size: 48px,
  $advanced-date-picker-month-slide-duration: 0.36s,
  $advanced-date-picker-month-slide-easing: cubic-bezier(0.4, 0, 0.2, 1),
  $advanced-date-picker-preset-width: 260px,
  $advanced-date-picker-day-font-weight: 600,
  $advanced-date-picker-week-label-color: rgb(90, 90, 90)
);

Desktop month navigation can be tuned with $advanced-date-picker-month-slide-duration and $advanced-date-picker-month-slide-easing. Weekday headers and week numbers use $advanced-date-picker-week-label-color.

The package ships with a slightly larger default day geometry than stock Vuetify (44px cells and 42px day buttons) while keeping the existing typography defaults. If you customize Vuetify's day size, that value still flows into the package defaults. Configure vuetify/settings before loading the package styles in the same Sass graph:

@use 'vuetify/settings' with (
  $date-picker-month-day-size: 48px,
  $button-font-weight: 600
);

@use '@gigerit/vuetify-date-input-advanced/styles';

Use either the prebuilt CSS import or the Sass entry. Importing both will load the component styles twice.

Quick Start

<script setup lang="ts">
import { ref } from 'vue'
import type { AdvancedDateModel } from '@gigerit/vuetify-date-input-advanced'

const today = new Date()
const inSevenDays = new Date(today)
inSevenDays.setDate(today.getDate() + 6)

const value = ref<AdvancedDateModel<Date>>([today, inSevenDays])
</script>

<template>
  <v-advanced-date-input v-model="value" label="Travel dates" :months="2" />
</template>

Single-date mode:

<script setup lang="ts">
import { ref } from 'vue'
import type { AdvancedDateModel } from '@gigerit/vuetify-date-input-advanced'

const value = ref<AdvancedDateModel<Date>>(new Date())
</script>

<template>
  <v-advanced-date-input
    v-model="value"
    label="Departure"
    :range="false"
    :show-presets="false"
  />
</template>

Standalone inline picker with controlled visible month:

<script setup lang="ts">
import { ref } from 'vue'
import type { AdvancedDateModel } from '@gigerit/vuetify-date-input-advanced'

const value = ref<AdvancedDateModel<Date>>(null)
const month = ref(0)
const year = ref(2026)
</script>

<template>
  <v-advanced-date-picker
    v-model="value"
    v-model:month="month"
    v-model:year="year"
    :months="2"
    :first-day-of-week="1"
    :auto-apply="false"
    variant="outlined"
  />
</template>

In the current implementation and tests, month is zero-based, so 0 is January. Use first-day-of-week in templates to match Vuetify's VDatePicker behavior, where 0 is Sunday, 1 is Monday, and so on.

Model Shapes

Examples below use native Date, but the actual runtime value type is the active Vuetify adapter type TDate.

`range`	`returnObject`	Emitted shape
`true`	`false`	`null` or `[start, end]`
`true`	`true`	`null` or `{ start, end }`
`false`	ignored	`null` or `date`

Notes:

In range mode, the component accepts either a tuple or { start, end } object as input.
With autoApply=true, range selection can emit an incomplete value such as [start, null] after the first click.
If the user picks an earlier end date, the range is normalized into chronological order before emit.

Behavior

Presets

Presets are shown only in range mode. If you omit presets, the picker generates these built-in options:

Today
Yesterday
Last 7 Days
Last 30 Days
This Month
Last Month
This Quarter
Last Quarter
Year to Date
Last Year

Built-in rolling presets use completed days rather than including today:

Last 7 Days and Last 30 Days both end on yesterday.
Year to Date spans January 1 through yesterday and is omitted on January 1.
This Month and This Quarter remain full calendar-period presets.

Custom preset shape:

type PresetRange<TDate> = {
  label: string
  value: [TDate, TDate] | (() => [TDate, TDate])
  slot?: string
}

If preset.slot is "highlight", the picker looks for a preset-highlight slot before falling back to preset.

Presets that violate the active date constraints are rendered disabled and do not emit presetSelect.

Example:

<script setup lang="ts">
import type { PresetRange } from '@gigerit/vuetify-date-input-advanced'

const presets: PresetRange<Date>[] = [
  {
    label: 'Weekend Escape',
    slot: 'highlight',
    value: () => {
      const start = new Date('2026-01-16')
      const end = new Date('2026-01-18')
      return [start, end]
    },
  },
]
</script>

<template>
  <v-advanced-date-input :presets="presets" :auto-apply="false">
    <template #preset-highlight="{ preset }">
      <div class="d-flex align-center justify-space-between w-100">
        <span>{{ preset.label }}</span>
        <v-chip size="x-small" color="primary" variant="tonal">Custom</v-chip>
      </div>
    </template>
  </v-advanced-date-input>
</template>

Typed Input

VAdvancedDateInput parses text on blur and on Enter. In single-date mode, inputReadonly makes the text field a picker opener only.

On mobile non-inline layouts, built-in activator presses are intercepted before the text input can focus, and the activator becomes readonly while the fullscreen dialog is opening or open. This prevents the virtual keyboard from flashing during the transition.

Parsing order:

parseInput(value) if provided
adapter.date(value)
ISO strings matching YYYY-MM-DD...
native Date.parse

Validation uses the same min, max, allowedDates, allowedStartDates, and allowedEndDates constraints as calendar clicks.

Input formatting uses displayFormat, which is passed directly to adapter.format(...). The default is fullDate.

Range text uses rangeSeparator, which defaults to –. The current implementation also accepts common spaced dash separators such as - and —.

Range Input Fields

In range mode, the default activator renders two Vuetify text fields: one for the start date and one for the end date. Shared Vuetify field props such as label, variant, color, hideDetails, messages, rules, clearable, and validation state apply to the grouped control. Side-specific input details use startFieldProps and endFieldProps.

text, update:text, and draft.text remain a single combined string using rangeSeparator. Users can still paste a complete range into either side. When a side becomes active, its full native input text is selected so typing replaces the current value immediately.

<script setup lang="ts">
import { ref } from 'vue'
import type {
  AdvancedDateInputFieldProps,
  AdvancedDateModel,
} from '@gigerit/vuetify-date-input-advanced'

const value = ref<AdvancedDateModel<Date>>(null)

const startFieldProps = {
  placeholder: 'Start date',
  name: 'bookingStartDate',
  ariaLabel: 'Booking start date',
} satisfies AdvancedDateInputFieldProps

const endFieldProps = {
  placeholder: 'End date',
  name: 'bookingEndDate',
  ariaLabel: 'Booking end date',
} satisfies AdvancedDateInputFieldProps
</script>

<template>
  <v-advanced-date-input
    v-model="value"
    label="Booking dates"
    :start-field-props="startFieldProps"
    :end-field-props="endFieldProps"
  />
</template>

Controlled Text and Draft Lifecycle

Bind v-model:text when the parent needs to own the visible field text instead of treating it as a formatted mirror of modelValue.

update:text emits whenever the component wants to change the displayed text
update:draft emits the current AdvancedDateInputDraft<TDate> snapshot, including parse, availability, and validation state
inputCommit emits after a successful text or picker commit
inputInvalid emits when commit or close validation fails
draftClose reports overlay close attempts with their reason, strategy, and outcome

When the text is controlled and differs from the formatted committed value, the input enters text-draft mode. In that mode the popup selection is kept in sync with the parsed text, including parser and availability changes from parseInput, rangeSeparator, min, max, allowedDates, allowedStartDates, and allowedEndDates.

closeDraftStrategy controls what happens when the overlay closes while a draft is still pending:

revert: discard the draft and return to the committed value
preserve: close the overlay but keep the current draft text and draft selection
commit: validate and commit the draft before closing; if validation fails, the close is blocked

Parent-managed submit flow:

<script setup lang="ts">
import { ref } from 'vue'
import type {
  AdvancedDateInputDraft,
  AdvancedDateInputPublicInstance,
  AdvancedDateModel,
} from '@gigerit/vuetify-date-input-advanced'

const value = ref<AdvancedDateModel<Date>>(null)
const text = ref('')
const draft = ref<AdvancedDateInputDraft<Date> | null>(null)
const inputRef = ref<AdvancedDateInputPublicInstance<Date> | null>(null)

async function submitFromParent() {
  const committed = await inputRef.value?.commitInput()

  if (!committed) {
    console.log(inputRef.value?.errorMessages)
  }
}
</script>

<template>
  <v-advanced-date-input
    ref="inputRef"
    v-model="value"
    v-model:text="text"
    :auto-apply="false"
    close-draft-strategy="commit"
    @update:draft="draft = $event"
  />

  <v-btn @click="submitFromParent">Submit</v-btn>
</template>

Input Attr Forwarding

When VAdvancedDateInput renders a single-date field, non-prop attrs and listeners fall through to the internal VTextField. Use this for form-oriented attrs such as id, name, aria-*, data-*, and hooks such as @blur or @keydown.

<v-advanced-date-input
  v-model="value"
  :range="false"
  id="booking-start-date"
  name="bookingStartDate"
  data-testid="booking-start-date"
  @blur="validateField"
/>

In range mode, non-prop attrs and listeners are applied to the connected range field shell. Put native start/end input attrs in startFieldProps and endFieldProps.

<v-advanced-date-input
  v-model="value"
  id="booking-dates"
  data-testid="booking-dates"
  :start-field-props="{ id: 'booking-start-date', name: 'bookingStartDate' }"
  :end-field-props="{ id: 'booking-end-date', name: 'bookingEndDate' }"
/>

If you provide the activator slot, the slot content owns its own attrs and listeners. inputReadonly only affects the built-in single-date text field, so it has no effect in range mode, when inline is enabled, or when you provide a custom activator slot. Use readonly, startFieldProps.readonly, or endFieldProps.readonly for range-mode readonly fields. The mobile fullscreen keyboard-suppression behavior still applies to built-in range fields.

Overlay and Mobile Behavior

VAdvancedDateInput changes presentation by context:

Desktop, non-inline: picker inside VMenu
Mobile, non-inline: picker inside fullscreen VDialog
inline: picker rendered directly with no overlay

On mobile, the picker switches to a vertically scrollable, windowed month list instead of desktop-style prev/next nav buttons. The built-in mobile fullscreen activator fields suppress control focus on press and become readonly while the dialog is opening or open to avoid showing the touchscreen keyboard. Custom activator slots own their own mobile focus and keyboard behavior.

Apply / Cancel

autoApply controls calendar click behavior:

true: updates modelValue as the user selects dates
false: keeps a draft selection in the picker and shows Apply / Cancel

API

Shared Props

These props are accepted by both VAdvancedDateInput and VAdvancedDatePicker.

Prop	Type	Default	Notes
`modelValue`	`AdvancedDateModel<TDate>`	`null`	Current value
`range`	`boolean`	`true`	Set `false` for single-date mode
`returnObject`	`boolean`	`false`	Range mode only; emits `{ start, end }` instead of a tuple
`months`	`number`	`2`	Visible month count, clamped to at least `1`
`month`	`number \| undefined`	current month	Leading visible month
`year`	`number \| undefined`	current year	Leading visible year
`presets`	`PresetRange<TDate>[] \| undefined`	built-in range presets	Ignored when `range=false`
`showPresets`	`boolean`	`true`	Shows or hides the preset list in range mode
`swipeable`	`boolean`	`true`	Public prop; the current source does not attach swipe handlers
`autoApply`	`boolean`	`true`	`false` enables draft selection and footer actions
`min`	`TDate \| null`	`null`	Minimum selectable date
`max`	`TDate \| null`	`null`	Maximum selectable date
`allowedDates`	`(date: TDate) => boolean`	`undefined`	Shared per-day availability check applied to both endpoints
`allowedStartDates`	`(date: TDate) => boolean`	`undefined`	Additional availability check for single dates and ordered range starts
`allowedEndDates`	`(date: TDate) => boolean`	`undefined`	Additional availability check for ordered range ends
`showWeekNumbers`	`boolean`	`false`	Displays week numbers; uses adapter week calculations when available and otherwise falls back to ISO week numbers
`firstDayOfWeek`	`string \| number \| undefined`	adapter or locale default	Mirrors Vuetify `VDatePicker`; `0` starts weeks on Sunday, `1` on Monday, and so on
`prevIcon`	`AdvancedDateIconValue`	`$prev`	Previous-month navigation icon; accepts Vuetify aliases, prefixed set strings, SVG path arrays, or components
`nextIcon`	`AdvancedDateIconValue`	`$next`	Next-month navigation icon; accepts Vuetify aliases, prefixed set strings, SVG path arrays, or components
`disabled`	`boolean`	`false`	Applies disabled state to wrapper controls; day availability still comes primarily from date constraints
`readonly`	`boolean`	`false`	Full picker read-only mode: blocks calendar and preset interaction, and hides the manual action footer
`theme`	`string \| undefined`	inherited	Passed to the picker `VCard`
`rounded`	`string \| number \| boolean \| undefined`	`undefined`	Passed to the picker `VCard`
`border`	`string \| number \| boolean`	`true`	Passed to the picker `VCard`
`elevation`	`string \| number`	`2`	Passed to the picker `VCard`
`variant`	`'elevated' \| 'flat' \| 'tonal' \| 'outlined' \| 'text' \| 'plain'`	`elevated`	Picker surface variant. When passed through `VAdvancedDateInput`, it affects the inline picker only
`width`	`string \| number \| undefined`	`undefined`	Picker width
`minWidth`	`string \| number \| undefined`	`undefined`	Picker min width; also used for the desktop menu wrapper
`maxWidth`	`string \| number \| undefined`	`undefined`	Picker max width
`density`	`'default' \| 'comfortable' \| 'compact'`	`default`	Picker density and input density

`VAdvancedDateInput`-Only Props

Prop	Type	Default	Notes
`menu`	`boolean`	`false`	Controlled open state for the menu or dialog
`inline`	`boolean`	`false`	Renders the picker directly instead of using an overlay
`label`	`string \| undefined`	`undefined`	Shared field label for either the single-date field or range field group
`placeholder`	`string \| undefined`	`undefined`	Single-date input placeholder. In range mode, use `startFieldProps.placeholder` and `endFieldProps.placeholder`
`variant`	`string \| undefined`	mode-dependent	Outside inline mode, styles the built-in field(s). In `inline` mode, styles the picker `VCard`. Omit it to keep the default outlined field or elevated inline picker
`hideDetails`	`boolean \| 'auto'`	`auto`	Shared field details behavior
`messages`	`string \| string[] \| undefined`	`undefined`	Shared field messages
`error`	`boolean`	`false`	Combines with internal parse and validation errors
`errorMessages`	`string \| string[] \| undefined`	`undefined`	Merged with internal parse and validation errors
`rules`	`readonly unknown[]`	`[]`	Validates the single-date field or combined range text
`clearable`	`boolean`	`false`	Clears both text and model
`color`	`string \| undefined`	`undefined`	Applies the Vuetify field color to the built-in text control(s); supports utility names with or without `text-` and raw CSS colors
`focused`	`boolean`	`false`	Single-date `VTextField` focus state. In range mode, use `activeField`
`activeField`	`'start' \| 'end' \| undefined`	`undefined`	Range-mode active side. When set on desktop, the side input is focused and its text selected, and programmatic picker opens use it as the default boundary
`prependInnerIcon`	`AdvancedDateIconValue \| undefined`	`undefined`	Single-date `VTextField` prepend icon. In range mode, use side-specific field props
`appendInnerIcon`	`AdvancedDateIconValue`	`$calendar`	Single-date `VTextField` append icon. In range mode, use side-specific field props
`startFieldProps`	`AdvancedDateInputFieldProps \| undefined`	`undefined`	Range-mode start input props
`endFieldProps`	`AdvancedDateInputFieldProps \| undefined`	`undefined`	Range-mode end input props
`inputReadonly`	`boolean`	`false`	Makes the single-date field readonly while keeping the picker, icon, and footer actions interactive
`text`	`string \| undefined`	`undefined`	Controlled combined text value for parent-owned draft flows
`closeDraftStrategy`	`'revert' \| 'preserve' \| 'commit'`	`revert`	Controls how pending drafts behave when the overlay closes
`displayFormat`	`string`	`fullDate`	Passed to `adapter.format(...)` for text display
`rangeSeparator`	`string`	`–`	Separator used for formatted range text
`parseInput`	`(value: string) => TDate \| null`	`undefined`	Custom parser used before adapter and native parsing

AdvancedDateInputFieldProps supports the side-specific range input details that should not apply to the whole grouped field:

type AdvancedDateInputField = 'start' | 'end'

interface AdvancedDateInputFieldProps {
  placeholder?: string
  prependInnerIcon?: AdvancedDateIconValue
  appendInnerIcon?: AdvancedDateIconValue
  readonly?: boolean
  id?: string
  name?: string
  ariaLabel?: string
  class?: unknown
  style?: StyleValue
  attrs?: Record<string, string | number | boolean | null | undefined>
}

Events

Event	Component	Payload	Notes
`update:modelValue`	both	`AdvancedDateModel<TDate>`	Main value update
`update:menu`	input	`boolean`	Overlay open state
`update:text`	input	`string`	Requested text change for controlled text mode
`update:activeField`	input	`'start' \| 'end'`	Active range input side
`update:draft`	input	`AdvancedDateInputDraft<TDate>`	Current parsed draft snapshot
`update:month`	both	`number`	Leading visible month after user navigation
`update:year`	both	`number`	Leading visible year after user navigation
`apply`	both	`AdvancedDateModel<TDate>`	Fired when Apply is used with `autoApply=false`
`cancel`	both	none	Fired from picker cancel flows, including `Escape` inside the calendar
`inputCommit`	input	`AdvancedDateInputCommitPayload<TDate>`	Fired when a text or picker draft commits
`inputInvalid`	input	`AdvancedDateInputInvalidPayload<TDate>`	Fired when commit validation fails
`draftClose`	input	`AdvancedDateInputClosePayload<TDate>`	Fired after an overlay close attempt resolves or is blocked
`presetSelect`	both	`PresetRange<TDate>`	Fired when a preset is chosen

Slots

All picker slots can be passed either directly to VAdvancedDatePicker or through VAdvancedDateInput, which forwards them to the internal picker.

Slot	Component	Slot props
`activator`	input	`{ props, isOpen }`
`day`	both	`{ date, outside, disabled, today, selected, rangeStart, rangeEnd, inRange, preview, props }`
`preset`	both	`{ preset, active, disabled, props }`
`preset-<name>`	both	Same as `preset`, selected when `preset.slot === '<name>'`
`actions`	both	`{ apply, cancel, disabled }`

When overriding day, spread the provided props onto your interactive element to preserve keyboard and ARIA behavior.

Exposed Picker Methods

A ref on VAdvancedDatePicker exposes these methods:

Method	Description
`focusDate(date)`	Navigates if needed and focuses a specific date
`focusActiveDate()`	Focuses the active or first available date
`prevMonth()`	Moves to the previous visible month
`nextMonth()`	Moves to the next visible month

Exposed Input Methods

A ref on VAdvancedDateInput exposes the AdvancedDateInputPublicInstance<TDate> handle:

Member	Type	Description
`commitInput()`	`() => Promise<boolean>`	Validates the current draft and commits it when possible
`validate()`	`() => Promise<string[]>`	Runs draft validation and returns the current messages
`resetValidation()`	`() => Promise<void>`	Clears parse and rule validation state
`revertDraft()`	`() => void`	Restores the committed value and formatted text
`text`	`string`	Current visible input text
`draft`	`AdvancedDateInputDraft<TDate>`	Current draft snapshot
`isDirty`	`boolean`	Whether the current text differs from the committed display text
`isPristine`	`boolean`	Whether the field has avoided validation so far
`isValid`	`boolean \| null`	`null` while pristine, then the current validation state
`errorMessages`	`string[]`	Current merged parse and field-rule errors

Styling and Theming

Import @gigerit/vuetify-date-input-advanced/style.css once. The picker uses .v-advanced-date-picker as its root class. The input wrapper uses .v-advanced-date-input.

Key CSS custom properties:

Variable	Default	Purpose
`--v-advanced-date-picker-color`	`rgb(var(--v-theme-primary))`	Accent color
`--v-advanced-date-range-bg`	computed	Confirmed range background
`--v-advanced-date-range-preview-bg`	computed	Hover-preview background
`--v-advanced-date-selected-bg`	`var(--v-advanced-date-picker-color)`	Selected day background
`--v-advanced-date-selected-color`	`rgb(var(--v-theme-on-primary))`	Selected day text color
`--v-advanced-date-preset-width`	`220px`	Preset column width
`--v-advanced-date-cell-size`	`44px`	Calendar cell size
`--v-advanced-date-day-size`	`calc(var(--v-advanced-date-cell-size) - 2px)`	Day button size
`--v-advanced-date-day-inset`	`calc((var(--v-advanced-date-cell-size) - var(--v-advanced-date-day-size)) / 2)`	Range background inset
`--v-advanced-date-gap`	`24px`	Gap between visible months

By default, --v-advanced-date-day-size and --v-advanced-date-day-inset stay derived from --v-advanced-date-cell-size, so a runtime cell-size override keeps the grid and range highlights aligned unless you also override the inner variables.

Example:

.booking-picker {
  --v-advanced-date-preset-width: 18rem;
  --v-advanced-date-cell-size: 48px;
  --v-advanced-date-picker-color: rgb(var(--v-theme-secondary));
}

Picker accent color is controlled through the CSS custom properties above. VAdvancedDateInput.color only forwards to the built-in text field control(s); it does not remap picker accent styling.

Accessibility and Keyboard

The current implementation includes:

Per-day aria-label, aria-selected, aria-disabled, and aria-current="date"
A live region that announces visible months and selected values
Roving focus across day buttons
Keyboard navigation on the calendar grid

Keyboard shortcuts:

Key	Behavior
`ArrowLeft` / `ArrowRight`	Move 1 day
`ArrowUp` / `ArrowDown`	Move 1 week
`Home` / `End`	Move to start or end of the current week based on `firstDayOfWeek`
`PageUp` / `PageDown`	Move 1 month
`Shift+PageUp` / `Shift+PageDown`	Move 1 year
`Enter` / `Space`	Select active day
`Escape`	Cancel picker interaction

Development

Repository layout:

src/: components, composables, utilities, styles, and plugin entry
playground/: local Vite app for manual QA
tests/: Vitest and Vue Test Utils coverage
dist/: generated build output

Useful scripts:

npm install
npm run dev
npm run typecheck
npm run test
npm run lint
npm run build
npm run format

CI

GitHub Actions now validates the repo automatically with .github/workflows/ci.yml.

pull requests to main, pushes to main, and manual workflow_dispatch runs execute the same core checks used locally
the workflow installs dependencies with npm ci and runs npm run typecheck, npm run lint, npm run test, and npm run build
the job uses Node 22.x, matching the current release pipeline runtime
in-progress runs for the same ref are canceled when a newer commit is pushed

Before opening a PR, the matching local safety check is:

npm run typecheck
npm run lint
npm run test
npm run build

Releases

Releases are automated from .github/workflows/release.yml.

.github/workflows/ci.yml handles routine validation for pushes and pull requests
googleapis/release-please-action opens and maintains the release PR from conventional commits on main
when that release PR is merged, GitHub Actions builds, validates, and publishes the package to npm with provenance
npm publishing is configured for trusted publishing via GitHub OIDC, so no long-lived NPM_TOKEN is required in the workflow

Because npm trusted publishers can only be configured for packages that already exist on the registry, the first publish still has to be done manually by an authenticated maintainer.

After the initial publish, configure the package as a trusted publisher for this repository and workflow in npm, or with npm CLI v11.10.0+:

npm trust github @gigerit/vuetify-date-input-advanced \
  --repo gigerIT/vuetify-date-input-advanced \
  --file .github/workflows/release.yml

Verified from the repository configuration:

The library is built with Vite in library mode
Output formats are ESM and CommonJS
Declaration files are generated from src/
Styles are exported as @gigerit/vuetify-date-input-advanced/style.css
Tests run in jsdom with Vuetify bootstrapped in Vue Test Utils

Notes

Examples in this README use native Date, but the actual value type follows your configured Vuetify date adapter.
Default package icons use Vuetify aliases ($calendar, $prev, $next) so they follow your app's official Vuetify icon configuration.

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
docs/images		docs/images
playground		playground
src		src
styles		styles
tests		tests
.codex		.codex
.gitattributes		.gitattributes
.gitignore		.gitignore
AGENTS.md		AGENTS.md
CHANGELOG.md		CHANGELOG.md
README.md		README.md
eslint.config.mjs		eslint.config.mjs
package-lock.json		package-lock.json
package.json		package.json
prettier.config.mjs		prettier.config.mjs
styles.sass		styles.sass
tsconfig.build.json		tsconfig.build.json
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts

Navigation Menu

Repository files navigation

@gigerit/vuetify-date-input-advanced

Demo

Features

Exports

Requirements

Install

Styling

Quick Start

Model Shapes

Behavior

Presets

Typed Input

Range Input Fields

Controlled Text and Draft Lifecycle

Input Attr Forwarding

Overlay and Mobile Behavior

Apply / Cancel

API

Shared Props

`VAdvancedDateInput`-Only Props

Events

Slots

Exposed Picker Methods

Exposed Input Methods

Styling and Theming

Accessibility and Keyboard

Development

CI

Releases

Notes

About

Releases

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

@gigerit/vuetify-date-input-advanced

Demo

Features

Exports

Requirements

Install

Styling

Quick Start

Model Shapes

Behavior

Presets

Typed Input

Range Input Fields

Controlled Text and Draft Lifecycle

Input Attr Forwarding

Overlay and Mobile Behavior

Apply / Cancel

API

Shared Props

VAdvancedDateInput-Only Props

Events

Slots

Exposed Picker Methods

Exposed Input Methods

Styling and Theming

Accessibility and Keyboard

Development

CI

Releases

Notes

About

Resources

Stars

Watchers

Forks

Releases

Contributors

Languages

`VAdvancedDateInput`-Only Props