vue获取当前一周日期-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue获取当前一周日期。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

方法一

首先我们通过获取今天时间来确认日期和周几，此时会出现三种情况：

1.当前周一；

2.当前周日；

3.当前是周二到周五任意一天；

也就是明确知道的是今天的日期以及今天周几，通过new Date()来获取时间

需要两个数组来存放每天的名称和日期，也可以一开始创建一个数组对象[{week:'',time:''}]，根据个人喜好不多说上代码

const days = ref([''])// 存放一周日期
const week = ref();// 存放当天周几
const weeks = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']

const generateDateModel = () => {
// 当前时间
const myDate = new Date();
// 年份
const year = myDate.getFullYear();
// 月份
const month = myDate.getMonth()+1;
// 今天周几，number
week.value = myDate.getDay();

// 今天日期，number
const day = myDate.getDate();

// 存放今天到周日的天数
const futureArr = ref()

// 本周已过天数
const pastArr = ref()

// 把今天周几转换成string
week.value = weeks[week.value];

for(let i = 0;i < weeks.length;i+=1){
//判断今天是不是周二到周六中的一天
    if(week.value !== weeks[0] && week.value !== weeks[6]){
// 找到今天索引
      const index = weeks.indexOf(week.value); 
// 今天的日期
      days.value[index-1] = `${year}/${month}/${day}` 
// 今天到周日的天数
      const future = 7 - index 
// 本周已过天数
      const past = index - 1 
// 获取本周剩余日期
      for (let j = future; j > 0 ; j -= 1){ 
        days.value[index + j - 1] = `${year}/${month}/${day+j}`
      }
// 获取本周已过日期
      for (let j = 0; j < past; j += 1){ 
        days.value[j] = `${year}/${month}/${day-j-1}`
      }
// 如果今天是周一获取本周日期
    if(week.value === weeks[0]){ 
      for(let j = 1; j < 7; j += 1){
         days.value[i] = `${year}/${month}/${day+i}`
      }
    }
// 如果今天是周日过去七天日期
      if(week.value === weeks[6]){ 
        for(let j = 7; j > 0; j -= 1){
          days.value[i] = `${year}/${month}/${day-i}`
      }
    }
  }
}

generateDateModel();

以上代码可以实现当前周七天的日期，但是代码过于冗余，而且还有一个问题就是没有顺序，不推荐

方法二

当知道当前日期，我们是可以直接推断出周一或者周日的，因此可以直接用今天的日期减去相应天数，得到周一或周日并且顺序依次排列，代码如下：

const days = ref([''])
const week = ref();
const weeks = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']


const generateDateModel = () => {
  const myDate = new Date();
  const year = myDate.getFullYear();
  const month = myDate.getMonth() + 1;
  week.value = myDate.getDay() - 1;// 此方法查询出来的是当前周几的数字，比如周一就是1
  let day = myDate.getDate();
  week.value = weeks[week.value];
  if(week.value === weeks[0]){ // 如果今天是周一获取本周日期
    for(let j = 0; j < 7; j += 1){
       days.value[j] = `${year}/${month}/${day + j}`
    }
  }else{
    const index = weeks.indexOf(week.value); // 找到今天索引
     day -= index ; // 周一
     for(let j = 0; j < 7; j += 1){
       days.value[j] = `${year}/${month}/${day + j}`
    }
  }
}

generateDateModel();

此方法可以实现最近一周的时间，当前时间如果是本月最后或者第一天会出现问题。

方法二改进

首先根据周一往后排思路是正确的，但是通过数值简单加减会出现在月初和月末减到负值或加到31以上，因此需要先转成时间戳，通过时间戳减去一天的86400000，先得到今天的索引通过索引来进行加减，代码如下

有更好的方法可以推荐给我

const days = ref([''])
const week = ref();
const day = ref();
const weeks = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']

const generateDateModel = () => {
  const myDate = new Date();
  const year = myDate.getFullYear();
  const month = myDate.getMonth()+1;
  week.value = myDate.getDay()-1;
  day.value = myDate.getDate();
  week.value = week.value === -1 ? weeks[6] : weeks[week.value];
if(week.value === weeks[0]){ // 如果今天是周一获取本周日期
  days.value[0] = `${year}/${month}/${myDate.getDate()}`
  for(let j = 1; j < 7; j += 1){
    const oneDay = new Date(days.value[0]).getTime() + j * 86400000
    days.value[j] =  `${new Date(oneDay).getFullYear()}/${new Date(oneDay).getMonth() + 1}/${new Date(oneDay).getDate()}`
  }
}else{
  const index = weeks.indexOf(week.value); // 找到今天索引
  const Monday = Date.now() - index * 86400000
  days.value[0] = `${new Date(Monday).getFullYear()}/${new Date(Monday).getMonth() + 1}/${new Date(Monday).getDate()}`
  for (let i = 1; i < 7; i+=1) {
    const oneDay = Monday + i * 86400000
    days.value[i] =  `${new Date(oneDay).getFullYear()}/${new Date(oneDay).getMonth() + 1}/${new Date(oneDay).getDate()}`
  }
}
  
}

console.log(days.value)

generateDateModel();

以下是最中输出结果：

vue获取星期几,vue.js,javascript,前端,typescript