Skip to content

Commit bb6f4f8

Browse files
committed
docs(dates): update / improve documentation
1 parent 994e103 commit bb6f4f8

File tree

1 file changed

+153
-4
lines changed
  • packages/docs/src/pages/en/features

1 file changed

+153
-4
lines changed

packages/docs/src/pages/en/features/dates.md

+153-4
Original file line numberDiff line numberDiff line change
@@ -103,13 +103,119 @@ The following example shows how to use the date composable to format a date stri
103103

104104
<ApiInline hide-links />
105105

106-
### Adapter
106+
## Adapter
107107

108108
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).
109109

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+
import DateFnsAdapter from "@date-io/date-fns"
139+
140+
export default createVuetify({
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+
import DayJsAdapter from '@date-io/dayjs'
178+
import { enUS } from 'date-fns/locale'
179+
180+
export default createVuetify({
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:
193+
194+
::: tabs
195+
196+
```bash [pnpm]
197+
pnpm install @date-io/luxon luxon
198+
```
199+
200+
```bash [yarn]
201+
yarn add @date-io/luxon luxon
202+
```
203+
204+
```bash [npm]
205+
npm install @date-io/luxon luxon
206+
```
207+
208+
```bash [bun]
209+
bun add @date-io/luxon luxon
210+
```
211+
212+
:::
213+
214+
Then configure Vuetify to use Luxon:
215+
110216
```js { resource="src/plugins/vuetify.js" }
111217
import { createVuetify } from 'vuetify'
112-
import LuxonAdapter from "@date-io/luxon"
218+
import LuxonAdapter from '@date-io/luxon'
113219

114220
export default createVuetify({
115221
date: {
@@ -118,6 +224,49 @@ export default createVuetify({
118224
})
119225
```
120226

227+
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+
import MomentAdapter from '@date-io/moment'
258+
259+
export default createVuetify({
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+
121270
For TypeScript users, an interface is also exposed for [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation):
122271

123272
```ts { resource="src/plugins/vuetify.js" }
@@ -132,7 +281,7 @@ declare module 'vuetify' {
132281
}
133282
```
134283

135-
### Localization
284+
## Localization
136285

137286
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:
138287

@@ -149,7 +298,7 @@ export default createVuetify({
149298
})
150299
```
151300

152-
#### Create your own
301+
## Create your own
153302

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

0 commit comments

Comments
 (0)