Dates

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

Copy Page as Markdown

ads via vuetify

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'))) // 2
</script>

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>

Custom formats

You can extend available formats by providing definitions matching your adapter capabilities.

import { createVuetify } from 'vuetify'

export default createVuetify({
  date: {
    formats: {
      // for built-in adapter
      weekdayNarrow: { weekday: 'narrow' },
      // for Moment or Day.js
      weekdayNarrow: 'dd',
      // for Luxon or DateFns
      weekdayNarrow: 'EEEEE',
    },
  },
})

// use registered key
date.format(adapter.date(), 'weekdayNarrow')

Built-in adapter accepts objects that will be passed to Intl.DateTimeFormat.

// works only with built-in adapter
date.format(adapter.date(), { weekday: 'narrow' })

API

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

Toggle Inline API

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.

Using DateFns

To use DateFns as the date adapter, install the necessary packages:

pnpm install @date-io/date-fns date-fns

Then configure Vuetify to use DateFns:

import { createVuetify } from 'vuetify'
import DateFnsAdapter from "@date-io/date-fns"

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

For more information on DateFns, visit the date-fns documentation.

Using DayJs

To use DayJs as the date adapter, install the necessary packages:

pnpm install @date-io/dayjs dayjs

Then configure Vuetify to use DayJs:

import { createVuetify } from 'vuetify'
import DayJsAdapter from '@date-io/dayjs'
import en from 'dayjs/locale/en'

export default createVuetify({
  date: {
    adapter: DayJsAdapter,
    locale: { en },
  },
})

For more information on DayJs, visit the dayjs documentation.

Using Luxon

To use Luxon as the date adapter, install the necessary packages:

pnpm install @date-io/luxon luxon

Then configure Vuetify to use Luxon:

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

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

For more information on Luxon, visit the luxon documentation.

Using Moment

To use Moment as the date adapter, install the necessary packages:

pnpm install @date-io/moment moment

Then configure Vuetify to use Moment:

import { createVuetify } from 'vuetify'
import MomentAdapter from '@date-io/moment'

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

For more information on Moment, visit the moment documentation.

Typescript

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'

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
}

Inheritance

You can also extend and override build-in DateAdapter using class inheritance:

import { VuetifyDateAdapter } from 'vuetify/date/adapters/vuetify'

export class MyAdapter extends VuetifyDateAdapter {
  sayHello () {
    return `Hello, current week starts at ${this.startOfWeek(this.date())}`
  }
  override startOfWeek (date: Date, firstDayOfWeek?: string | number): Date {
    return super.startOfWeek(date, 2) // forcing Tuesday
  }
}

export default createVuetify({
  date: {
    adapter: MyAdapter,
  },
  ...
})

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

String adapter

Date objects can be inconvenient to work with, especially if you’re just passing the value straight to a fetch request. Vuetify also exports a StringDateAdapter that will cause date components to emit strings instead.

import { StringDateAdapter } from 'vuetify/date/adapters/string'

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

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.

#Dates

#Usage

#Format options

#Custom formats

#API

#Adapter

#Using DateFns

#Using DayJs

#Using Luxon

#Using Moment

#Typescript

#Localization

#Create your own

#Inheritance

#String adapter

Ready for more?

Dates

Usage

Format options

Custom formats

API

Adapter

Using DateFns

Using DayJs

Using Luxon

Using Moment

Typescript

Localization

Create your own

Inheritance

String adapter