How to use Dayjs to calculate common dates in Vue

How to use Dayjs to calculate common dates in Vue

When using vue to develop projects, the front end often needs to calculate some date and time, such as:

  • Calculate weekly and monthly deadlines
  • Calculate the date before/after XX days
  • Convert timestamp to date (YYYY-MM-DD)
  • Calculate the number of days in a month
  • Date to timestamp

Recommend a lightweight JavaScript library for processing time and date: dayjs

It is very convenient to use this plug-in to calculate common dates

1. Install dayjs in the project, the command is: npm install dayjs --save

2. In main.js , add the following two lines of code

import dayjs from 'dayjs';
Vue.prototype.dayjs = dayjs;

3. Use it directly where needed on the page

The current date or timestamp is converted . The format is followed by the content you want to format. **dayjs()** does not put any parameters in the brackets. The default is the current date. You can also put a timestamp to convert directly.

(Note: When using the date picker of the Element component, its value-format attribute requires:

Components Dayjs (format) Element（value-format）
Year YYYY yyyy
moon MM MM
day DD dd
hour HH HH
point mm mm
Second ss ss

The expressions of year and day are slightly different and easy to confuse.)

this.dayjs().format("YYYY-MM-DD")
this.dayjs().format("YYYY-MM-DD HH:mm")
this.dayjs(1614787200000).format("YYYY-MM-DD HH:mm:ss")

2. Calculate the start and end dates of a week/month/year. The methods used are startOf() and endOf() . The brackets can be "week", "month", or "year".
(ps: adding format is for more intuitiveness)

this.dayjs().startOf("week");
this.dayjs().endOf("week").format("YYYY-MM-DD");
this.dayjs().startOf("month").format("YYYY-MM-DD");
this.dayjs("2021-02-09").endOf("month").format("YYYY-MM-DD");

Calculate dates, such as a few days ago or a few days later.

Front (minus) After (add)
subtract(param1, parameter2) add(param1, parameter2)
Parameter 1 number
Parameter 2 Unit ("week", "month", "year")

this.dayjs().subtract(3,'day').format("YYYY-MM-DD")
this.dayjs().subtract(3,'month').format("YYYY-MM-DD")
this.dayjs().add(12,'day').format("YYYY-MM-DD")
this.dayjs('2021-03-12').add(45,'day').format("YYYY-MM-DD")

5. Get the day of the month, use the method dayInMonth()

 this.dayjs().daysInMonth();
 this.dayjs("2021-02-09").daysInMonth();
 this.dayjs("2021-01").daysInMonth();

6. Convert ordinary date to timestamp

this.dayjs().unix()
this.dayjs('2020-10-04').unix()

Summarize

This is the end of this article about how Vue uses Dayjs to calculate common dates. For more information about Vue calculating common dates, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Vue+element-ui adds a custom right-click menu method example
  • Create test paper related functions based on vue and element (example code)
  • A brief discussion on the fastest way to modify the default using Elementui in Vue
  • vue+element_ui uploads files and passes additional parameters
  • Initial practice of vue3.0+vue-router+element-plus
  • element-plus a vue3.x UI framework (first experience with element-ui 3.x version)
  • How to create a project with Vue3+elementui plus
  • Vue element realizes table merging row data
  • Summary of event handling in Vue.js front-end framework
  • Conventional JS processing functions for Vue Element front-end application development

<<:  Linux/Mac MySQL forgotten password command line method to change the password

>>:  Summary of Ubuntu backup methods (four types)

Recommend

Explanation of CAST and CONVERT functions for type conversion in MySQL database

MySQL's CAST() and CONVERT() functions can be...

Problems with using multiple single quotes and triple quotes in MySQL concat

When dynamically concatenating strings, we often ...

Do designers need to learn to code?

Often, after a web design is completed, the desig...

Discussion on the browsing design method of web page content

<br />For an article on a content page, if t...

Vue global filter concepts, precautions and basic usage methods

Table of contents 1. The concept of filter 1. Cus...

Solution to the problem of session failure caused by nginx reverse proxy

A colleague asked for help: the login to the back...

Solution to the problem that mysql local login cannot use port number to log in

Recently, when I was using Linux to log in locall...

Vue codemirror realizes the effect of online code compiler

Preface If we want to achieve the effect of onlin...

How to execute Linux shell commands in Docker

To execute a shell command in Docker, you need to...

Bootstrap 3.0 study notes grid system case

Preface In the previous article, we mainly learne...

Continuous delivery using Jenkins and Docker under Docker

1. What is Continuous Delivery The software produ...

How to use glog log library in Linux environment

Generate Linux library The Linux version uses cen...

Example of using MySQL to count the number of different values ​​in a column

Preface The requirement implemented in this artic...

How to solve the problem that scroll-view of WeChat applet cannot slide left and right

I'm currently working on my own small program...

Example of implementing GitHub's third-party authorization method in Vue

Table of contents Creating OAuth Apps Get the cod...