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

Vue uses el-tree lazy loading to implement the add, delete, modify and query functions

About the tree display of Vue, the project is use...

Centos8 builds nfs based on kdc encryption

Table of contents Configuration nfs server (nfs.s...

A Brief Analysis of Patroni in Docker Containers

Table of contents Create an image File Structure ...

Vue globally introduces scss (mixin)

Table of contents 1. mixin.scss 2. Single file us...

Detailed explanation of SRIOV pass-through configuration and performance testing based on KVM

SRIOV introduction, VF pass-through configuration...

Why Google and Facebook don't use Docker

The reason for writing this article is that I wan...

MySql import CSV file or tab-delimited file

Sometimes we need to import some data from anothe...

Introduction to the application of HTML tags superscript sup and subscript sub

HTML tag: superscript In HTML, the <sup> tag...

Solution to the problem of automatic restoration after modifying server.xml and content.xml in Tomcat

Write configuration files in server.xml and conte...

HTTP return code list (Chinese and English explanation)

http return code list (below is an overview) for ...

How to use Baidu Map API in vue project

Table of contents 1. Register an account on Baidu...

Implementation of mounting NFS shared directory in Docker container

Previously, https://www.jb51.net/article/205922.h...

21 MySQL standardization and optimization best practices!

Preface Every good habit is a treasure. This arti...

Ubuntu 16.04 mysql5.7.17 open remote port 3306

Enable remote access to MySQL By default, MySQL u...

Create a movable stack widget function using flutter

This post focuses on a super secret Flutter proje...