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:

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)