通过前端js获取指定年周的开始时间与结束时间(以周一为开始时间)

本文介绍了如何通过JavaScript在前端获取给定年份和周的开始和结束日期,以周一作为起始,确保日期范围准确计算。
摘要由CSDN通过智能技术生成

通过前端js获取指定年周的开始时间与结束时间(以周一为开始时间)


入参格式:年-周

//截取:具体看入参格式

let year=2024;

let week=2;

let weekStartDate=new Date();

let weekEndDate=new Date();


// 创建一个Date对象,设置为指定年份的第一周的周日
let date = new Date(year, 0, 1); // 年份, 月份(0代表1月), 日期
let weekDay=date.getDate();

if(weekDay!=1){

//若不是周一,则为去年最后周,需要取到下一年周一

date.setDate(date.getDate()+(7-week)+1);

} 

date.setDate(date.getDate()+(week-1)*7);

weekStartDate=new Date(date);

weekEndDate=new Date(date.setDate(date.getDate()+6));

console.log(weekStartDate.toISOString().slice(0, 10)); // 输出格式为YYYY-MM-DD

console.log(weekEndDate.toISOString().slice(0, 10)); // 输出格式为YYYY-MM-DD

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
前端中,可以使用vuejs-datepicker组件来实现结束时间大于等于开始时间的限制。通过设置computed属性来计算开始时间结束时间的范围,然后在模板中使用这些计算属性来限制日期选择。 下面是一个示例代码,演示了如何使用vuejs-datepicker组件来实现前端结束时间大于等于开始时间的限制: ```html <template> <div> <label for="start-date">开始时间:</label> <vuejs-datepicker v-model="startDate" :disabled-dates="disabledStartDates"></vuejs-datepicker> <label for="end-date">结束时间:</label> <vuejs-datepicker v-model="endDate" :disabled-dates="disabledEndDates"></vuejs-datepicker> </div> </template> <script> import moment from 'moment'; import VuejsDatepicker from 'vuejs-datepicker'; export default { components: { VuejsDatepicker }, data() { return { startDate: null, endDate: null }; }, computed: { disabledStartDates() { if (this.endDate) { let date = this.dateFormatter(this.endDate); date = date.split('-'); date[2] = Number(date[2]) + 1; date = date.join('-'); return { from: new Date(date) }; } else { return {}; } }, disabledEndDates() { return { to: new Date(this.startDate) }; } }, methods: { dateFormatter(date) { return moment(date).format('YYYY-MM-DD'); } } }; </script> ``` 在上面的代码中,我们使用了vuejs-datepicker组件来选择开始时间结束时间。通过设置`v-model`指令来绑定选择的日期值到`startDate`和`endDate`变量上。然后,我们使用`computed`属性来计算开始时间结束时间的范围,并将其传递给`disabled-dates`属性,以限制日期选择。 在`disabledStartDates`计算属性中,我们检查结束时间是否存在,如果存在,则将结束时间加一天,并将其设置为开始时间的禁用范围。在`disabledEndDates`计算属性中,我们将开始时间设置为结束时间的禁用范围。 这样,当用户选择开始时间后,结束时间将自动更新为大于等于开始时间日期范围。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

laizhixue

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值