Skip to main content
Date manipulation with adapter pattern supporting multiple date libraries and locale-aware formatting.

​
Features

  • Adapter pattern for date library abstraction
  • Locale-aware formatting via Intl.DateTimeFormat
  • Integration with useLocale for automatic locale sync
  • Temporal API support (Vuetify0DateAdapter)
  • Arithmetic operations (add/subtract days, months, etc.)
  • Comparison utilities (isBefore, isAfter, etc.)

​
Installation

import { createDatePlugin, Vuetify0DateAdapter } from '@vuetify/v0'

const app = createApp(App)
app.use(createDatePlugin({ 
  adapter: new Vuetify0DateAdapter() 
}))

​
Basic Usage

<script setup lang="ts">
import { useDate } from '@vuetify/v0'

const { adapter, locale } = useDate()

const today = adapter.date()
const formatted = adapter.format(today, 'fullDate')
const nextWeek = adapter.addDays(today, 7)
</script>

<template>
  <div>
    <p>Today: {{ formatted }}</p>
    <p>Locale: {{ locale }}</p>
  </div>
</template>

​
API Reference

​
createDatePlugin()

Creates a date plugin with adapter.
​
options
DatePluginOptions
required
Plugin configuration
​
adapter
DateAdapter<Z>
required
Date adapter instance (e.g., new Vuetify0DateAdapter())
​
locale
string
Default locale for formatting (e.g., ‘en-US’, ‘de-DE’)
​
locales
Record<string, string>
Short locale codes mapped to full Intl locale stringsExample: { en: 'en-US', de: 'de-DE' }
​
namespace
string
default:"'v0:date'"
The namespace for the date context

​
DateContext

​
adapter
DateAdapter<Z>
The date adapter instance with date manipulation methods
​
locale
ComputedRef<string | undefined>
Current locale (reactive, synced with useLocale if available)

​
DateAdapter Methods

​
Construction

​
date
(value?: any) => Z | null
Create a date from various inputs (ISO string, timestamp, Date object, etc.)
​
toJsDate
(date: Z) => Date
Convert adapter date to JavaScript Date
​
parseISO
(iso: string) => Z
Parse ISO 8601 string to date
​
toISO
(date: Z) => string
Convert date to ISO 8601 string
​
isValid
(value: any) => boolean
Check if a value is a valid date

​
Formatting

​
format
(date: Z, format: string) => string
Format date using preset formats:
  • 'fullDate': Full date (e.g., ‘January 15, 2024’)
  • 'shortDate': Short date (e.g., ‘1/15/24’)
  • 'normalDate': Normal date (e.g., ‘Jan 15, 2024’)
  • 'year': Year only (e.g., ‘2024’)
  • 'month': Full month (e.g., ‘January’)
  • 'monthShort': Short month (e.g., ‘Jan’)
  • 'dayOfMonth': Day of month (e.g., ‘15’)
  • 'hours12h': 12-hour format (e.g., ‘2 PM’)
  • 'hours24h': 24-hour format (e.g., ‘14’)
  • 'fullTime': Full time with seconds
​
formatByString
(date: Z, format: string) => string
Format date using token string:
  • YYYY: 4-digit year
  • MM: 2-digit month
  • DD: 2-digit day
  • HH: 2-digit hours (24h)
  • hh: 2-digit hours (12h)
  • mm: 2-digit minutes
  • ss: 2-digit seconds
  • A: AM/PM

​
Arithmetic

​
addMinutes
(date: Z, amount: number) => Z
Add/subtract minutes (negative for subtraction)
​
addHours
(date: Z, amount: number) => Z
Add/subtract hours
​
addDays
(date: Z, amount: number) => Z
Add/subtract days
​
addWeeks
(date: Z, amount: number) => Z
Add/subtract weeks
​
addMonths
(date: Z, amount: number) => Z
Add/subtract months
​
addYears
(date: Z, amount: number) => Z
Add/subtract years

​
Comparison

​
isAfter
(date: Z, comparing: Z) => boolean
Check if date is after comparing date
​
isBefore
(date: Z, comparing: Z) => boolean
Check if date is before comparing date
​
isEqual
(date: Z, comparing: Z) => boolean
Check if dates are equal
​
isSameDay
(date: Z, comparing: Z) => boolean
Check if dates are on the same day
​
isSameMonth
(date: Z, comparing: Z) => boolean
Check if dates are in the same month
​
isSameYear
(date: Z, comparing: Z) => boolean
Check if dates are in the same year
​
isWithinRange
(date: Z, range: [Z, Z]) => boolean
Check if date is within range (inclusive)

​
Boundaries

​
startOfDay
(date: Z) => Z
Get start of day (midnight)
​
endOfDay
(date: Z) => Z
Get end of day (23:59:59)
​
startOfWeek
(date: Z, firstDayOfWeek?: number) => Z
Get start of week (0 = Sunday, 1 = Monday)
​
endOfWeek
(date: Z) => Z
Get end of week
​
startOfMonth
(date: Z) => Z
Get start of month
​
endOfMonth
(date: Z) => Z
Get end of month
​
startOfYear
(date: Z) => Z
Get start of year
​
endOfYear
(date: Z) => Z
Get end of year

​
Getters

​
getYear
(date: Z) => number
Get year (4-digit)
​
getMonth
(date: Z) => number
Get month (0-indexed: 0 = January)
​
getDate
(date: Z) => number
Get day of month (1-31)
​
getHours
(date: Z) => number
Get hours (0-23)
​
getMinutes
(date: Z) => number
Get minutes (0-59)
​
getSeconds
(date: Z) => number
Get seconds (0-59)
​
getDiff
(date: Z, comparing: Z | string, unit?: string) => number
Get difference between dates in specified unit (days, hours, minutes, etc.)

​
Examples

​
Date Arithmetic

const { adapter } = useDate()

const today = adapter.date()
const tomorrow = adapter.addDays(today, 1)
const nextWeek = adapter.addWeeks(today, 1)
const nextMonth = adapter.addMonths(today, 1)

​
Date Comparison

const { adapter } = useDate()

const date1 = adapter.date('2024-01-15')
const date2 = adapter.date('2024-01-20')

const isAfter = adapter.isAfter(date2, date1) // true
const isSameMonth = adapter.isSameMonth(date1, date2) // true

​
Locale Integration

import { createDatePlugin, createLocalePlugin, Vuetify0DateAdapter } from '@vuetify/v0'

app.use(createLocalePlugin({
  default: 'en',
  messages: {
    en: { hello: 'Hello' },
    de: { hello: 'Hallo' },
  },
}))

app.use(createDatePlugin({ 
  adapter: new Vuetify0DateAdapter(),
  locales: { en: 'en-US', de: 'de-DE' },
}))

// Date formatting will automatically use the selected locale
const locale = useLocale()
locale.select('de')

const { adapter } = useDate()
const date = adapter.date()
const formatted = adapter.format(date, 'fullDate') // German format

Build docs developers (and LLMs) love

Get started for freeTalk to us