js-使用dayjs库常用方法以及vue中使用计算两个日期间的天数差

1.前言

        dayjs是一个轻量级的JavaScript日期库，可以方便地处理日期和时间。

2.dayjs常用方法 

2.1创建dayjs对象

dayjs();
dayjs('2023-10-01');
dayjs(1664582400000); // 时间戳

 2.2获取日期和时间

dayjs().year(); // 获取年份
dayjs().month(); // 获取月份（0-11）
dayjs().date(); // 获取日期
dayjs().day(); // 获取星期几（0-6）
dayjs().hour(); // 获取小时
dayjs().minute(); // 获取分钟
dayjs().second(); // 获取秒
dayjs().millisecond(); // 获取毫秒

2.3设置日期与时间

dayjs().set('year', 2023);
dayjs().set('month', 9); // 9表示10月
dayjs().set('date', 1);
dayjs().set('day', 0); // 0表示星期日
dayjs().set('hour', 12);
dayjs().set('minute', 30);
dayjs().set('second', 0);
dayjs().set('millisecond', 0);

 2.4格式化日期与时间

dayjs().format('YYYY-MM-DD'); // 格式化为年-月-日
dayjs().format('YYYY-MM-DD HH:mm:ss'); // 格式化为年-月-日 时:分:秒
dayjs().format('YYYY年MM月DD日 HH:mm:ss'); // 自定义格式

2.5日期与时间计算

dayjs().add(1, 'day'); // 加一天
dayjs().subtract(1, 'month'); // 减一个月
dayjs().startOf('year'); // 获取一年的开始时间
dayjs().endOf('month'); // 获取一个月的结束时间

2.6比较日期与时间 

dayjs('2023-10-01').isBefore('2023-10-10'); // 判断是否在某个日期之前
dayjs('2023-10-01').isAfter('2023-09-01'); // 判断是否在某个日期之后
dayjs('2023-10-01').isSame('2023-10-01'); // 判断是否与某个日期相同

2.7获取时间差

dayjs('2023-10-10').diff('2023-10-01', 'day'); // 获取两个日期之间的天数差
dayjs('2023-10-10').diff('2023-10-01', 'hour'); // 获取两个日期之间的小时数差

 3.vue.js中使用dayjs计算两个日期间的天数差

 引入dayjs库

npm install dayjs

使用dayjs计算两个日期间的天数差

<template>
  <div>
    <p>开始日期: {
  
  { startDate }}</p>
    <p>结束日期: {
  
  { endDate }}</p>
    <p>相差天数: {
  
  { daysDifference }}</p>
  </div>
</template>

<script>
import dayjs from 'dayjs';

export default {
  data() {
    return {
      startDate: '2023-10-01',
      endDate: '2023-10-10'
    };
  },
  computed: {
    daysDifference() {
      return dayjs(this.endDate).diff(dayjs(this.startDate), 'day');
    }
  }
};
</script>

        daysDifference计算属性中，dayjs(this.endDate)和dayjs(this.startDate)将日期字符串转换为dayjs对象，

        使用diff方法计算两个日期之间的天数差。'day'参数指定了返回的时间单位为天。