vue-dayjs

Handy Day.js filters and directives for Vue.js

Day.js is a minimalist (Fast 2kB) JavaScript library for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js.

How to use

import Dayjs from 'vue-dayjs';

Vue.use(Dayjs, {
  // language set, default cn
  lang?: cn | en,
  /**
   * addon filters { key: filter name }
   * if set {} will only dayjs base filter can use.
   */
  filters?: {
    ago: 'ago',
    ...
  },
  /**
   * addon directives { key: directives name }
   * set {} to disable.
   */
  directives?: {
    countdown: 'countdown',
    ...
  }
});

new Vue({...});

Notice this plugin esm format only and it will take effect automatic.

Filtering Methods

Format

<span>{{ someDate | dayjs('YYYY-MM-DD') }}</span>

Add

<span>{{ someDate | dayjs('add', 1, 'day') }}</span>

Subtract

<span>{{ someDate | dayjs('subtract', 1, 'day') }}</span>

Unix Timestamp (milliseconds)

<span>{{ someDate | dayjs('valueOf') }}</span>

Unix Timestamp (seconds)

<span>{{ someDate | dayjs('unix') }}</span>

Days in Month

<span>{{ someDate | dayjs('daysInMonth') }}</span>

As JSON

<span>{{ someDate | dayjs('toJSON') }}</span>

As Array

<span>{{ someDate | dayjs('toArray') }}</span>

As Object

<span>{{ someDate | dayjs('toObject') }}</span>

Is Leap Year

<span>{{ someDate | dayjs('isLeapYear') }}</span>

Difference

<span>{{ someDate | dayjs('diff', anotherDate) }}</span>

Addon filter : xx ago

<span>{{ someDate | ago }}</span>

Addon directive : countdown

<v-countdown="{target: someDate, format: 'DD days HH:mm:ss'}" />

Method inject

Also can use dayjs in your logic layer.

created() {
  this.$dayjs().format('YYYY-MM-DD HH:mm:ss');
}