- Get link
- X
- Other Apps
I have made a post on the more advanced ways of adding DayJS as a plugin "How to use plugins in DayJs with Vue using Vue DayJS" which you may find useful.
In my hunt for a replacement for MomentJS, as they have announced end of life and no likely replacement, I came across the ultra lightweight DayJS. DayJS is not quite as feature filled but appears to be much faster, easier to install and easier to use. I am going to be using a wrapper installation package for DayJS to add it to Vue.
Installation
To get started, install vue-dayjs the usual way from the command line
Once installed your going to want to setup the DayJS instance on your Vue object. I am using Laravel as my overall solution for the project but something like this should work for your Vue project:
In your app.js file (main Vue compiled file) add the following:
Basics of vue-dayjs
Let me explain. The wrapper has some default settings for language, filters and directives, supplied on the installation documentation which I have stuck with (except for language)
- lang
- This is the language selected for displaying days and times, by default this is set to cn (Chinese). If you open the vue-dayjs/index.js file from the node module, the language definitions for various JavaScript date definitions, are there.
- filters
- ago is the default (and only defined filter) with the package. Its pretty simple, takes a date and adds ago to the end, for example: 1 day ago
- directives
- countdown is the default, like filters, (is the only directive) with the package. Countdown does what it says on the tin, counts down to a specified date time. Here is an example:
This shows the remaining time in days hours minutes and seconds and counts down as it happens:
That concludes the installation and walkthrough of the basics of vue-dayjs.
Standard usage
DayJS can be used in a more native fashion in a similar manner to MomentJS. Just pass a date into a DayJS constructor:
Comments