dayjs在周日获取当前周第一天的时间但是显示下一周第一天的时间-解决办法

桥志三

已于 2023-05-29 11:45:30 修改

阅读量2.7k

点赞数

文章标签：前端 javascript

于 2023-04-25 14:50:58 首次发布

本文链接：https://blog.csdn.net/akkigg/article/details/130364464

版权

安装dayjs

npm install dayjs

yarn add dayjs

pnpm install dayjs

方法一.

判断当天是不是周日如果是就减一周

dateHandler(week = 0) {
      const timestamp = Math.round(new Date())

      const date = new Date(timestamp)

      const weekday = date.getDay()

      const we = weekday === 0 ? week - 1 : week

      const startWeek = dayjsH().add(we, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD')

      const endWeek = dayjsH().add(we, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD')

}

方法二.

import dayjs from 'dayjs'
import weekday from 'dayjs/plugin/weekday'
import 'dayjs/locale/zh-cn'
dayjs.extend(weekday)
dayjs.locale('zh-cn')

<script>
    dateHandler(week = 0) {
      const we = week

      const startWeek = dayjs().add(we, 'week').startOf('week').format('YYYY-MM-DD')

      const endWeek = dayjs().add(we, 'week').endOf('week').format('YYYY-MM-DD')
}
</script>

代码解析:

import weekday from 'dayjs/plugin/weekday'

这段代码使用了 Day.js 库中的插件 weekday。这个插件添加了一个 weekday() 方法，用于获取指定日期的星期几。

例如，假设我们有一个表示日期的 Day.js 对象：


const day = dayjs('2023-04-25');

我们可以使用 weekday() 方法获取该日期是星期几：


day.weekday(); // 2 （星期二）

默认情况下，Day.js 将星期天视为每周的第一天，因此返回值范围为 0 到 6，其中 0 表示星期天，1 表示星期一，依此类推。但是，你也可以通过传递一个数字来设置不同的开始日期，例如：


day.weekday(1); // 1 （星期一）

这样就会将星期一视为每周的第一天，并返回相应的值。

总之，weekday 插件为 Day.js 添加了获取日期星期几的方法，让处理日期相关的任务更加方便。

dayjs.extend(weekday)

通过 extend() 方法可以扩展其功能。weekday 是 dayjs 自带的一个插件，它提供了一些用于获取、设置周几的方法。

通过执行 dayjs.extend(weekday)，就可以将 weekday 插件装载到 dayjs 中，从而在代码中使用该插件提供的方法。

该插件提供的方法包括：

.weekday()：获取当前日期是本周的第几天，0 表示周日，1 表示周一，依此类推。
.set('weekday', n)：将日期设置为本周的第 n 天，n 的取值范围为 0~6。
.startOf('week')：将日期设置为本周的开始（周日）。
.endOf('week')：将日期设置为本周的结束（周六）。
使用该插件可以方便地对日期进行周几的计算和设置，并且能够避免因本地化导致的不同周的起始和结束时间的差异问题。

import 'dayjs/locale/zh-cn'

这段代码是用来引入Day.js库中的中文简体语言包，其作用是将Day.js库中的英文单词和短语转换成中文简体形式，以便于在中文环境下使用。

在Day.js库中，通过引入不同语言包，可以实现对全球各种语言的本地化支持。当我们需要在页面中展示日期时间信息时，可以使用Day.js库进行格式化和处理，通过引入相应的语言包，可以确保显示的日期时间信息符合当前用户所在地区的语言习惯，提升用户体验。

具体来说，引入' dayjs/locale/zh-cn'语言包后，就可以使用Day.js库提供的API对日期时间进行如下操作：

格式化日期时间，例如：dayjs().locale('zh-cn').format('YYYY年MM月DD日 HH:mm:ss')
解析日期时间字符串，例如：dayjs('2023年04月25日', 'YYYY年MM月DD日').locale('zh-cn')
获取时间差，例如：dayjs('2023年04月25日').locale('zh-cn').fromNow()

dayjs.locale('zh-cn') 

是 Day.js 中用于设置当前语言环境为中文简体的方法。

具体来说，它的作用是将 Day.js 的日期、时间等输出以及解析方式转换为符合中文简体语言环境的格式。例如，使用 dayjs().format('YYYY年MM月DD日') 输出的日期会变成类似于“2023年04月25日”的格式，而不是默认的“2023-04-25”格式。

除了简单的日期格式化之外，它还会影响到 Day.js 中其他一些与日期有关的操作，比如计算两个日期之间相差的天数或者小时数等。这意味着，在设置了适当的语言环境后，你可以更方便地以自然语言的方式处理日期和时间数据。

需要注意的是，如果你在代码中多次使用了 dayjs.locale('zh-cn')，那么它只会影响到最后一次调用之后创建的 Day.js 对象。如果你希望全局设置某个语言环境，可以通过修改 dayjs.localeData() 方法返回的对象来实现。