Dates
Easily hook up date libraries that are used for components that require date functionality.
This feature requires v3.2.0 (Orion)
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.
The following example demonstrates explicitly importing the Vuetify date adapter and passing it to the date options.
import { createVuetify } from 'vuetify'
import { VuetifyDateAdapter } from 'vuetify/labs/date/adapters/vuetify'
export default createVuetify({
date: {
adapter: VuetifyDateAdapter,
},
})
Within your application, import the useDate function and use it to access the date composable.
<script>
import { useDate } from 'vuetify/labs/date'
export default {
setup () {
const date = useDate()
console.log(date.getMonth(new Date('March 1, 2021'))) // 3
},
}
</script>
For a list of all supported date adapters, visit the date-ioproject repository.
Format options
The date composable supports the following date formatting options:
- fullDateWithWeekday
- normalDateWithWeekday
- keyboardDate
- monthAndDate
- monthAndYear
The following example shows how to use the date composable to format a date string:
<script>
import { useDate } from 'vuetify/labs/date'
export default {
setup () {
const date = useDate()
const formatted = date.format('2010-04-13 00:00:00', '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 DateIOFormatsinterface. 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"
const luxon = new LuxonAdapter({ locale: "sv" });
export default createVuetify({
date: {
adapter: luxon,
},
})
Create your own
To create your own date adapter, implement the DateAdapter interface:
import type { DateAdapter } from 'vuetify/labs'
export interface DateAdapter<Date> {
date (value?: any): Date | null
format (date: Date, formatString: string): string
startOfMonth (date: Date): Date
endOfMonth (date: Date): Date
startOfYear (date: Date): Date
endOfYear (date: Date): Date
isAfter (date: Date, comparing: Date): boolean
isEqual (date: Date, comparing: Date): boolean
isSameDay (date: Date, comparing: Date): boolean
isSameMonth (date: Date, comparing: Date): boolean
isValid (date: any): boolean
isWithinRange (date: Date, range: [Date, Date]): boolean
addDays (date: Date, amount: number): Date
addMonths (date: Date, amount: number): Date
getYear (date: Date): number
setYear (date: Date, year: number): Date
getDiff (date: Date, comparing: Date | string, unit?: string): number
getWeek (date: Date): number
getWeekArray (date: Date): (Date | null)[][]
getWeekdays (): string[]
getMonth (date: Date): number
}