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
+153-4
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
+
175
+
```js { resource="src/plugins/vuetify.js" }
176
+
import { createVuetify } from'vuetify'
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
+
For more information on Moment, visit the [moment](https://momentjs.com/) documentation.
267
+
268
+
## Typescript
269
+
121
270
For TypeScript users, an interface is also exposed for [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation):
122
271
123
272
```ts { resource="src/plugins/vuetify.js" }
@@ -132,7 +281,7 @@ declare module 'vuetify' {
132
281
}
133
282
```
134
283
135
-
###Localization
284
+
## Localization
136
285
137
286
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