Vue DateFormat

This plugin is compatible with Vue 3

Vue-DateFormat is a component designed to format dates in a Vue.js application. It simple takes in a Date or String and converts it via toLocaleString() with different options passed in depending on your props.


For any bugs or feature requests, regarding this component, head on over to the issues page. For any queries that do not relate to this exact component, contact us at Void Solutions.

Installation

``npm i @voidsolutions/vue-dateformat`

Nuxt 3 Compatiblity

We need to create a plugin to use this component globally in Nuxt 3. Create dateformat.client.js to your /plugins directory. The contents of the file should be as follows:

`javascript
import dateformat from "@voidsolutions/vue-dateformat";

export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(dateformat);
})
`

You can now use the component in your templates as follows:

`html

`

Usage as a global component in Vue 3

In your `main.js` file, import the component and register it as a global component.

`javascript
import { createApp } from 'vue'
const app = createApp(App)
...

import DateFormat from '@voidsolutions/vue-dateformat'
app.use(DateFormat);

...

app.mount('#app')
`

In your template, use the component as follows:

`html



`

$3

| Prop | Type | Default | Description |
| ----------- | -------------- | --------------------- | --------------------------------------------------- |
| date | String or Date | new Date() | The date to be formatted |
| no-seconds | Boolean | false | If true, the seconds will not be displayed |
| no-minutes | Boolean | false | If true, the minutes will not be displayed |
| no-hours | Boolean | false | If true, the hours will not be displayed |
| no-days | Boolean | false | If true, the day of the month will not be displayed |
| no-month | Boolean | false | If true, the month will not be displayed |
| no-date | Boolean | false | If true, the date will not be displayed |
| short-month | Boolean | false | If true, the month will be abbreviated |
| no-year | Boolean | false | If true, the year will not be displayed |
| has-time | Boolean | false | Whether to show a time component |
| classes | String | 'vs-date' | Classes to be applied to the \ |
| locales | String or Array| navigator.languages | The locale to be used for formatting |

Examples

Here are some examples for you to become familiar with our date formatter.

No Props

`html


Output: 1 January 1970
`

No days, Short month

`html


Output: Jan 2020
`

Custom Styling

You can also use the classes prop to pass any specific class over to the ` tag, just on the off chance you need something like that.