【JS篇】获取当天所在的一周、前一周、下一周的日期和星期信息

前言

开发中，遇到需要获取一周的日期，并能够进行上下周的切换，设计稿见下图，但现有的组件库中日历组件无法达到设计稿需求，且现有日历组件一般都是展示一个完整的月份或年份，并没有展示一周日期信息的组件，因此决定查找资料自行制作一个周日历组件。

最终完成效果如下：

实现

样式布局这里就不赘述了，主要说说JS如何获取星期信息。

网上查找参考资料后（参考文章链接见文末），将方法进行一番改造，可适用于多种场景，具体代码如下：

// 根据参数日期获取具体日期信息
export const formatDate = function (date = new Date()) {
  let year = date.getFullYear();
  let month = (date.getMonth() + 1) ;
  let day = date.getDate();
  let week = ['天', '一', '二', '三', '四', '五', '六'][date.getDay()];
  
  const dateInfo = {
    date: new Date(date),
    dateStr: `${year}-${month.toString().padStart(2,'0')}-${day.toString().padStart(2,'0')}`,
    year,
    month,
    day,
    week,
    isToday:false
  }
  
  const today = new Date();
  // 判断是否为当天
  if (today.getFullYear() === year && (today.getMonth() + 1) === month && today.getDate() === day) {
    dateInfo['isToday'] = true;
  }
  return dateInfo;
};

// 根据基准日期，获取长度为dayLenth的日期数组
export const setDate = function (date = new Date(), step = 7) {
  let weekData = [];
  const week = date.getDay() - 1;
  date = getDateByDate(date, week * -1);
  for (let i = 0; i < step; i++) {
    weekData.push(formatDate(i == 0 ? date : getDateByDate(date, 1)))
  }
  return weekData;
};

// 根据基准日期获取前后某天的日期对象
export const getDateByDate = function (date = new Date(), range = 0) {
  date.setDate(date.getDate() + range);
  return date;
};

/* 
  获取以baselineDate所在周的一周、前一周、下一周的日期和星期信息(切换周期也可通过参数dayLenth自行设置)
  baselineDate: 设置的基准日期(返回的日期列表的第一个日期)
  range: 以 baselineDate 为基准日期的前后天数范围(如基准日期的range为0，需要返回前7天日期，则range为-7，后7天则range为7)
  step: 需要获取的日期信息周期天数，默认获取baselineDate所在周的一周日期信息
 */
export const getWeekDate = ({baselineDate = new Date(), range = 0, step = 7}) => {
  return setDate(getDateByDate(baselineDate, range), step);
};

调用：

// 获取当天所在星期数据
getWeekDate({baselineDate:new Date()})

// 获取以当天为基准日期的上星期数据
getWeekDate({
	baselineDate: new Date(),
	range: -7
})

// 获取以当天为基准日期的下星期数据
getWeekDate({
	baselineDate: new Date(),
	range: 7
})

formatDate 和 getDateByDate 方法可单独使用，如：

// 获取当天日期信息
formatDate(getDateByDate());

返回以下数据格式：

额外知识补充：

// ES6的字符串方法：日期、月份补零。2的意思是字符串长度不能小于2
month.toString().padStart(2,'0')

本文 参考文章链接：https://blog.51cto.com/wangjinchan/5256416