1.0.2 • Published 7 years ago
vue-dayjs v1.0.2
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');
}