vue-jalali-moment for vue 3

 

jalali(khorshidi, shamsi) filters for your Vue.js project.

Installation

Install via NPM...

``sh
$ npm install vue3-jalali-moment
`

...and require the plugin like so:

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

app.use(require('vue3-jalali-moment'));
`

Usage

Simply set moment as the filtering function and you're good to go. At least one argument is expected, which the filter assumes to be a format string if the argument doesn't match any of the other filtering methods.

`html
{{ $filter.moment(someDate, "dddd, MMMM Do YYYY") }}

{{ $filter.moment(new Date(), "dddd, MMMM Do YYYY") }}

`

Passing Your Date ( Not Available on this Update )

Moment.js expects your input to be either: a valid ISO 8601 formatted string (see ), a valid Date object, a Unix timestamp (must be passed as a Number), or a date string with an accompanying format pattern (i.e. when you know the format of the date input). For the latter, vue-moment allows you to pass your date and format pattern(s) as an array, like such:

`html
{{ [ someDate, "MM.DD.YY" ] | moment("jdddd, jMMMM Do jYYYY") }}
{{ [ jalaliDateString, "jYY-jMM-jDD" ] | moment("dddd, MMMM Do YYYY") }}

{{ [ someDate, ["MM.DD.YY", "MM-DD-YY", "MM-DD-YYYY"] ] | moment("dddd, MMMM Do YYYY") }}
`

As of 3.0.0, passing an empty or invalid input will no longer initiate moment with a new Date object.

Filtering Methods

$3

This is the default filtering option. Formats the date against a string of tokens. See for a list of tokens and examples.

Default

`html
{{ $filter.moment(someDate, "YYYY") }}

{{ $filter.moment(someDate, "jYYYY") }}

{{ $filter.moment(someDate, "ddd, hA") }}

{{ $filter.moment(someDate, "dddd, MMMM Do YYYY, h:mm:ss a") }}

`

For more information about moment#format, check out .




$3

Display a moment in relative time, either from now or from a specified date.

Default (calculates from current time)

`html
{{ $filter.moment(someDate, "from", "now") }}

{{ $filter.moment(someDate, "from") }}
`

With a reference time given

`html
{{ $filter.moment(someDate, "from", "Jan. 11th, 1985") }}
`

With suffix hidden (e.g. '4 days ago' -> '4 days')

`html
{{ $filter.moment(someDate, "from", "now", true) }}

{{ $filter.moment(someDate, "from", true) }}

{{ $filter.moment(someDate, "from", "Jan. 11th, 2000", true) }}
`

For more information about moment#fromNow and moment#from, check out and .




$3

Formats a date with different strings depending on how close to a certain date (today by default) the date is.

Default (calculates from current time)

`html
{{ $filter.moment(someDate, "calendar") }}

`

With a reference time given

`html
{{ $filter.moment(someDate, "calendar", "July 10 2021") }}

`

For more information about moment#calendar, check out .




$3

Mutates the original moment by adding time.

`html
{{ $filter.moment(someDate, "add", "7 days") }}

{{ $filter.moment(someDate, "add", "1 year, 3 months, 30 weeks, 10 days") }}
`

For more information about moment#add, check out .




$3

Works the same as add, but mutates the original moment by subtracting time.

`html
{{ $filter.moment(someDate, "subtract", "3 hours") }}
`

For more information about moment#subtract, check out .

$3

Convert the date to a certain timezone

`html
{{ $filter.moment(Date, "timezone", "America/Los_Angeles", "LLLL ss")}}
`

To use this filter you will need to pass moment-timezone through to the plugin

`js
// main.js
import { createApp } from 'vue'
import VueMoment from 'vue-moment'
import moment from 'moment-timezone'

const app = createApp({
...
})

app.use(VueMoment, {
moment,
})
`

For more information about moment#timezone, check out .




Chaining

There's some built-in (and not thoroughly tested) support for chaining, like so:

`html
{{ $filter.moment(someDate, "add", "2 years, 8 days", "subtract", "3 hours", "ddd, hA") }}
`

This would add 2 years and 8 days to the date, then subtract 3 hours, then format the resulting date.




Configuration

vue-moment should respect any global Moment customizations, including i18n locales. For more info, check out .

You can also pass a custom Moment object through with the plugin options. This technique is especially useful for overcoming the browserify locale bug demonstrated in the docs

`js
const moment = require('moment')
require('moment/locale/es')

Vue.use(require('vue-moment'), {
moment
})

console.log(Vue.moment().locale()) //es
``