Dates

Easily hook up date libraries that are used for components such as Date Picker and Calendar that require date functionality.

TIP

This feature was introduced in v3.4.0 (Blackguard)

Usage

The date composable provides a shared architecture that is used by components such as date picker and calendar. The default implementation is built using the native Date object, but can be swapped out for another date library. If no other date adapter is given, the default Vuetify one is used.

Within your application, import the useDate function and use it to access the date composable.

<script setup>
  import { useDate } from 'vuetify'

  const date = useDate()

  console.log(date.getMonth(new Date('March 1, 2021'))) // 3
</script>

INFO

For a list of all supported date adapters, visit the date-io project repository.

Format options

The date composable supports the following date formatting options:

Format Name	Format Output
fullDate	"Jan 1, 2024"
fullDateWithWeekday	"Tuesday, January 1, 2024"
normalDate	"1 January"
normalDateWithWeekday	"Wed, Jan 1"
shortDate	"Jan 1"
year	"2024"
month	"January"
monthShort	"Jan"
monthAndYear	"January 2024"
monthAndDate	"January 1"
weekday	"Wednesday"
weekdayShort	"Wed"
dayOfMonth	"1"
hours12h	"11"
hours24h	"23"
minutes	"44"
seconds	"00"
fullTime	"11:44 PM" for US, "23:44" for Europe
fullTime12h	"11:44 PM"
fullTime24h	"23:44"
fullDateTime	"Jan 1, 2024 11:44 PM"
fullDateTime12h	"Jan 1, 2024 11:44 PM"
fullDateTime24h	"Jan 1, 2024 23:44"
keyboardDate	"02/13/2024"
keyboardDateTime	"02/13/2024 23:44"
keyboardDateTime12h	"02/13/2024 11:44 PM"
keyboardDateTime24h	"02/13/2024 23:44"

The following example shows how to use the date composable to format a date string:

<script setup>
  import { useDate } from 'vuetify'

  const date = useDate()

  const formatted = date.format('2010-04-13', 'fullDateWithWeekday')

  console.log(formatted) // Tuesday, April 13, 2010
</script>

API

Feature	Description
useDate	The date composable is used by components that require date functionality

Adapter

The built-in date adapter implements a subset of functionality from the DateIOFormats interface. Because of this, it's easy to swap in any date library supported by date-io.

import { createVuetify } from 'vuetify'
import LuxonAdapter from "@date-io/luxon"

export default createVuetify({
  date: {
    adapter: LuxonAdapter,
  },
})

For TypeScript users, an interface is also exposed for module augmentation:

export default createVuetify({
  ...
})

declare module 'vuetify' {
  namespace DateModule {
    interface Adapter extends LuxonAdapter {}
  }
}

Localization

The date composable will use the current vuetify locale for formatting and getting the first day of the week. These do not always line up perfectly, so a list of aliases can be provided to map language codes to locales. The following configuration will look up en keys for translations, but use en-GB for date formatting:

export default createVuetify({
  locale: {
    locale: 'en',
  },
  date: {
    locale: {
      en: 'en-GB',
    },
  },
})

Create your own

To create your own date adapter, implement the DateAdapter interface:

import type { DateAdapter } from 'vuetify/labs'

export interface DateAdapter<TDate> {
  date (value?: any): TDate | null
  format (date: TDate, formatString: string): string
  toJsTDate (value: TDate): TDate
  parseISO (date: string): TDate
  toISO (date: TDate): string

  startOfDay (date: TDate): TDate
  endOfDay (date: TDate): TDate
  startOfMonth (date: TDate): TDate
  endOfMonth (date: TDate): TDate
  startOfYear (date: TDate): TDate
  endOfYear (date: TDate): TDate

  isBefore (date: TDate, comparing: TDate): boolean
  isAfter (date: TDate, comparing: TDate): boolean
  isEqual (date: TDate, comparing: TDate): boolean
  isSameDay (date: TDate, comparing: TDate): boolean
  isSameMonth (date: TDate, comparing: TDate): boolean
  isValid (date: any): boolean
  isWithinRange (date: TDate, range: [TDate, TDate]): boolean

  addDays (date: TDate, amount: number): TDate
  addMonths (date: TDate, amount: number): TDate

  getYear (date: TDate): number
  setYear (date: TDate, year: number): TDate
  getDiff (date: TDate, comparing: TDate | string, unit?: string): number
  getWeekArray (date: TDate): TDate[][]
  getWeekdays (): string[]
  getMonth (date: TDate): number
  setMonth (date: TDate, month: number): TDate
  getNextMonth (date: TDate): TDate
}