Vue如何使用Dayjs计算常用日期详解

在使用vue开发项目时，前端常常需要计算一些日期时间，如：

  • 计算周月截止日期
  • 计算XX天前/后的日期
  • 将时间戳转换为日期（YYYY-MM-DD）
  • 计算月天数
  • 日期转时间戳

推荐一个轻量的处理时间和日期的 JavaScript 库：dayjs

使用这个插件计算常用日期十分方便

1、在项目中安装dayjs，命令为：npm install dayjs --save

2、在main.js中，添加如下2句代码

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

3、在页面需要使用的地方，直接使用

当前日期或时间戳转换，format后面就跟着想要格式化的内容，**dayjs( ) **括号中不放任何参数，默认为当前日期，也可以放一个时间戳，直接转换

（注意：使用Element组件的日期选择器，其value-format属性要求：

组件 Dayjs（format） Element（value-format）
年 YYYY yyyy
月 MM MM
日 DD dd
时 HH HH
分 mm mm
秒 ss ss

其中年和日的表达略有不同，容易混）

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.计算某周/某月/某年的起始截止日期，所使用到的方法为startOf()，endOf()，括号中可以是"week" 、 “month”、 “year”
(ps:加format是为了更加直观)

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");

计算日期，如几天前、几天后日期，

前(减) 后（加）
subtract（参数1，参数2） add（参数1，参数2）
参数1 数字
参数2 单位（“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. 获取月天数，使用方法dayInMonth()

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

6、普通日期转换为时间戳

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

总结

到此这篇关于Vue如何使用Dayjs计算常用日期的文章就介绍到这了,更多相关Vue计算常用日期内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解vue移动端日期选择组件

    先给大家分享一下源码:https://github.com/lx544690189/vue-mobile-calendar Build Setup # install dependencies npm install # build for production with minification npm run build Usage install npm install vue-mobile-calendar or:(from the dist folder) <script src=&quo

  • vue获取时间戳转换为日期格式代码实例

    vue获取时间戳转换为日期格式. 方法一为转载黄轶老师的format方法:出处(黄轶老师github    https://github.com/ustbhuangyi): // date.js export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); }

  • vue2.0 自定义日期时间过滤器

    方法一: // template {{a | data}} //script data:{ a: Date.now() } filters: { data:function (input) { var d = new Date(input); var year = d.getFullYear(); var month = d.getMonth() + 1; var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate(); var

  • 基于vue2.0+vuex的日期选择组件功能实现

    基于vue2.0+vuex的日期选择组件功能实现

    calendar vue日期选择组件 一个选择日期的vue组件 基于vue2.0 + vuex 原本是想找这样的一个组件的,查看了vuex后,发现vuex的写法还不是基于2.0的,所以就自己动手做了 demo展示&&项目中的使用 目录结构 demo 用vue-cli 的webpack-simple构建的 calendar |--dist build生成的目录 |--doc 展示图片 |--src |--assets 资源 |--components |--calendar 日期组件 |--

  • Vue如何使用Dayjs计算常用日期详解

    Vue如何使用Dayjs计算常用日期详解

    在使用vue开发项目时,前端常常需要计算一些日期时间,如: 计算周月截止日期 计算XX天前/后的日期 将时间戳转换为日期(YYYY-MM-DD) 计算月天数 日期转时间戳 推荐一个轻量的处理时间和日期的 JavaScript 库:dayjs 使用这个插件计算常用日期十分方便 1.在项目中安装dayjs,命令为:npm install dayjs --save 2.在main.js中,添加如下2句代码 import dayjs from 'dayjs'; Vue.prototype.dayjs =

  • Vue实例的对象参数options的几个常用选项详解

    一. 新建一个Vue实例可以有下列两种方式: 1.new一个实例 var app= new Vue({ el:'#todo-app', // 挂载元素 data:{ // 在.vue组件中data是一个函数,要写成data () {}这种方式 items:['item 1','item 2','item 3'], todo:'' }, methods:{ // 方法成员 rm:function(i){ this.items.splice(i,1) } } }) // 之后再 export def

  • vue组件编写之todolist组件实例详解

    vue组件编写之todolist组件实例详解

    我们在topNav这个页面上插入一个todolist子组件 我不知道怎么回事,这里的markdown的代码总是串行..所以代码看得不舒服,见谅啊,我最后会放github的源代码地址. 1. 父组件topNav中注册子组件,引入子组件 <template> <div> <p>下面这一行就是定义的组件名称</p> <todo-list></todo-list> <router-view></router-view>

  • Python pandas常用函数详解

    本文研究的主要是pandas常用函数,具体介绍如下. 1 import语句 import pandas as pd import numpy as np import matplotlib.pyplot as plt import datetime import re 2 文件读取 df = pd.read_csv(path='file.csv') 参数:header=None 用默认列名,0,1,2,3... names=['A', 'B', 'C'...] 自定义列名 index_col='

  • vue+Element-ui实现分页效果实例代码详解

    当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination 分页,使用Pagination 快速完成分页功能 最终效果展示 <div class="deit"> <div class="crumbs"> &l

  • vue中v-model的应用及使用详解

    vue中v-model的应用及使用详解

    vue中经常使用到<input>和<textarea>这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别.vue使用v-model实现这些标签数据的双向绑定,它会根据控件类型自动选取正确的方法来更新元素. v-model本质上是一个语法糖.如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.t

  • 对vuex中getters计算过滤操作详解

    getter这个概念其实我们写的时候感觉好像和Mutations修改状态一样,实际上它们是有区别的: getters比较死板,如果你的百度钱包只有在金额为100才能提现,那么你在写提现页面,它是早已固定好的,而Mutation不一样,当你点击百度钱包提现,你哪怕是一元,它只要你点击了便可以提现,而且getters它是不需要什么点击,它就存在,只要你写了,这是什么意思,就是说假设你百度钱包为0,你存在了getter它就有100元,而你如果写许多百度经验,百度再次发红包0.5元时它就是100+0.5

  • redis配置文件中常用配置详解

    此次安装的版本为: 5.0.3 [root@localhost local]# redis-server --version Redis server v=5.0.3 sha=00000000:0 malloc=jemalloc-5.1.0 bits=64 build=afabdecde61000c3 打开redis.cof NETWORK # 指定 redis 只接收来自于该IP地址的请求,如果不进行设置,那么将处理所有请求 bind 127.0.0.1 #是否开启保护模式,默认开启.要是配置

  • Django零基础入门之常用过滤器详解

    Django零基础入门之常用过滤器详解

    引言: 前面讲过了Django中使用模板变量.使用很简单,那么有没有什么关于模板变量的骚操作呢? 答案是肯定有的,这就是本文要讲的--过滤器! 1.过滤器 (1)纯干货讲解: 作用: 对变量进行过滤.在真正渲染出来之前,过滤器会根据功能处理好变量,然后得出结果后再替换掉原来的变量展示出来. 语法:{{ fruits|lower }} 管道符号进行链式调用(可以理解为嵌套使用!),比如实现一个功能,先把所有字符变成小写,再把第一个字符转换成大写. 语法:{{fruits|lower|capfirs

  • Java精确计算BigDecimal类详解

    Java精确计算BigDecimal类详解

    引言 float和double类型的主要设计目标是为了科学计算和工程计算.他们执行二进制浮点运算,这是为了在广域数值范围上提供较为精确的快速近似计算而精心设计的.然而,它们没有提供完全精确的结果,所以不应该被用于要求精确结果的场合.但是,商业计算往往要求结果精确,这时候BigDecimal就派上大用场啦. 先看下面代码 public static void main(String[] args) { System.out.println(0.2 + 0.1); System.out.printl

随机推荐