You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/docs/src/pages/en/features/dates.md
+151-4Lines changed: 151 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -103,13 +103,119 @@ The following example shows how to use the date composable to format a date stri
103
103
104
104
<ApiInlinehide-links />
105
105
106
-
###Adapter
106
+
## Adapter
107
107
108
108
The built-in date adapter implements a subset of functionality from the [DateIOFormats](https://github.com/dmtrKovalenko/date-io/blob/master/packages/core/IUtils.d.ts) interface. Because of this, it's easy to swap in any date library supported by [date-io](https://github.com/dmtrKovalenko/date-io).
109
109
110
+
### Using DateFns
111
+
112
+
To use DateFns as the date adapter, install the necessary packages:
113
+
114
+
::: tabs
115
+
116
+
```bash [pnpm]
117
+
pnpm install @date-io/date-fns date-fns
118
+
```
119
+
120
+
```bash [yarn]
121
+
yarn add @date-io/date-fns date-fns
122
+
```
123
+
124
+
```bash [npm]
125
+
npm install @date-io/date-fns date-fns
126
+
```
127
+
128
+
```bash [bun]
129
+
bun install @date-io/date-fns date-fns
130
+
```
131
+
132
+
:::
133
+
134
+
Then configure Vuetify to use DateFns:
135
+
136
+
```js { resource="src/plugins/vuetify.js" }
137
+
import { createVuetify } from'vuetify'
138
+
importDateFnsAdapterfrom"@date-io/date-fns"
139
+
140
+
exportdefaultcreateVuetify({
141
+
date: {
142
+
adapter: DateFnsAdapter,
143
+
},
144
+
})
145
+
```
146
+
147
+
For more information on DateFns, visit the [date-fns](https://date-fns.org/) documentation.
148
+
149
+
### Using DayJs
150
+
151
+
To use DayJs as the date adapter, install the necessary packages:
152
+
153
+
::: tabs
154
+
155
+
```bash [pnpm]
156
+
pnpm install @date-io/dayjs dayjs
157
+
```
158
+
159
+
```bash [yarn]
160
+
yarn add @date-io/dayjs dayjs
161
+
```
162
+
163
+
```bash [npm]
164
+
npm install @date-io/dayjs dayjs
165
+
```
166
+
167
+
```bash [bun]
168
+
bun add @date-io/dayjs dayjs
169
+
```
170
+
171
+
:::
172
+
173
+
Then configure Vuetify to use DayJs:
174
+
110
175
```js { resource="src/plugins/vuetify.js" }
111
176
import { createVuetify } from'vuetify'
112
-
importLuxonAdapterfrom"@date-io/luxon"
177
+
importDayJsAdapterfrom'@date-io/dayjs'
178
+
import { enUS } from'date-fns/locale'
179
+
180
+
exportdefaultcreateVuetify({
181
+
date: {
182
+
adapter: DayJsAdapter,
183
+
locale: { en: enUS },
184
+
},
185
+
})
186
+
```
187
+
188
+
For more information on DayJs, visit the [dayjs](https://day.js.org/) documentation.
189
+
190
+
### Using Luxon
191
+
192
+
To use Luxon as the date adapter, install the necessary packages:
For more information on Luxon, visit the [luxon](https://moment.github.io/luxon/) documentation.
228
+
229
+
### Using Moment
230
+
231
+
To use Moment as the date adapter, install the necessary packages:
232
+
233
+
::: tabs
234
+
235
+
```bash [pnpm]
236
+
pnpm install @date-io/moment moment
237
+
```
238
+
239
+
```bash [yarn]
240
+
yarn add @date-io/moment moment
241
+
```
242
+
243
+
```bash [npm]
244
+
npm install @date-io/moment moment
245
+
```
246
+
247
+
```bash [bun]
248
+
bun add @date-io/moment moment
249
+
```
250
+
251
+
:::
252
+
253
+
Then configure Vuetify to use Moment:
254
+
255
+
```js { resource="src/plugins/vuetify.js" }
256
+
import { createVuetify } from'vuetify'
257
+
importMomentAdapterfrom'@date-io/moment'
258
+
259
+
exportdefaultcreateVuetify({
260
+
date: {
261
+
adapter: MomentAdapter,
262
+
},
263
+
})
264
+
```
265
+
266
+
## Typescript
267
+
121
268
For TypeScript users, an interface is also exposed for [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation):
122
269
123
270
```ts { resource="src/plugins/vuetify.js" }
@@ -132,7 +279,7 @@ declare module 'vuetify' {
132
279
}
133
280
```
134
281
135
-
###Localization
282
+
## Localization
136
283
137
284
The date composable will use the current vuetify [locale](/features/internationalization/) 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:
0 commit comments