深入解析Day.js在Vue项目中的高效日期处理实践

深入解析Day.js在Vue项目中的高效日期处理实践

Day.js是一个轻量级的JavaScript时间库，用于解析、验证、操作和格式化日期。它的API设计风格与Moment.js类似，但是它的体积更小，只有2KB，使得它在前端项目中非常受欢迎。Day.js支持链式操作，易于阅读和理解，同时它也是不可变的，这意味着Day.js对象操作后会返回一个新的Day.js实例。

效果大致如下：

在上述代码中，Day.js被用于处理日期和时间，主要体现在以下几个方面：

引入和配置

import dayjs from 'dayjs'
import isoWeek from 'dayjs/plugin/isoWeek'
dayjs.extend(isoWeek)

这段代码首先引入了Day.js库，然后引入了isoWeek插件。isoWeek插件用于处理ISO周相关的操作。通过dayjs.extend(isoWeek)来扩展Day.js，使其支持ISO周的相关功能。

获取当前日期的ISO周的开始日期

const getWeekStart = (date: string | null) => {
  if (!date) return null
  return dayjs(date).startOf('isoWeek').format('YYYY-MM-DD')
}

getWeekStart函数接受一个日期字符串作为参数，使用dayjs将其转换为Day.js对象，然后调用startOf('isoWeek')来获取该周的第一天（通常是周一），最后通过format('YYYY-MM-DD')将日期格式化为年-月-日的格式。

计算一周内每一天的日期

const getWeekDays = () => {
  const weekStart = getWeekStart(selectedWeek.value)
  weekDays.value = days.map((day, index) => {
    const date = new Date(weekStart)
    date.setDate(date.getDate() + index)
    return {
      key: day,
      label: `${dayLabels[day]}\n\n${date.getMonth() + 1}/${date.getDate()}`,
      date: date.toISOString().split('T')[0]
    }
  })
}

getWeekDays函数计算选定周的每一天的日期，并将其存储在weekDays响应式变量中。它首先获取周的开始日期，然后遍历每一天，通过new Date(weekStart)创建一个日期对象，并使用setDate方法加上索引值来获取该周的每一天的日期。

日期选择器的变化处理

const handleWeekChange = (value: any) => {
  selectedWeek.value = value
  fetchData(getWeekStart(selectedWeek.value), getDateAfterSevenDays(selectedWeek.value))
  getWeekDays()
}

handleWeekChange函数作为日期选择器变化的事件处理函数，当用户选择一个新的周时，它会更新selectedWeek的值，并调用fetchData函数来获取新周的数据，同时调用getWeekDays来更新周内每天的日期。

格式化日期

selectedWeek.value = dayjs().subtract(0, 'week').startOf('isoWeek').format('YYYY-MM-DD')

这段代码用于设置默认选中的周为当前周。它使用dayjs()获取当前日期的Day.js对象，然后通过subtract(0, 'week')获取当前周，接着通过startOf('isoWeek')获取周的开始日期，最后通过format('YYYY-MM-DD')格式化日期。

Day.js的这些特性在上述代码中得到了广泛的应用，展示了如何使用Day.js来处理复杂的日期逻辑。它的轻量级和易用性使得它成为处理日期和时间的理想选择。