new date() 计算本周周一日期

本文介绍了一种计算任意给定日期对应周一周期开始日期的方法。通过JavaScript实现,包括获取日期、判断星期几并计算出本周周一的具体日期。演示了如何使用函数封装和调用,适用于网页开发中日期计算的需求。

new date() 计算本周周一日期

需求:计算某天的那一周周一的日期

1.new Date()

date.getDay(); //获取周几  0-6
date.getTime();//获取时间戳 1302883200000

2.获取几天后的时间

function addDay(dayNumber, date) {
            date = date ? date : new Date();
            var ms = dayNumber * (1000 * 60 * 60 * 24);
            var newDate = new Date(date.getTime() + ms);
            return newDate;
        }
dayNumber  增加或减少的天数,正负整数
data 时间 无传入默认当前时间
原理:将时间戳增加时间的毫秒数再转回时间格式

3.计算周一日期

 function getTheDay(strTime) {
            //将获取的字符转转换为 new date
            var date= new Date(Date.parse(strTime.replace(/-/g,"/")));
            //获取该天是周几
            var datnum=date.getDay();
            //调用addDay方法获取本周一new date
            console.log(date.getTime())
            var getdays = addDay(-datnum+1,date);
            console.log(getdays.getDay())
            //将得到的new date转换为时间
            var getday = getdays.getFullYear()+"-"+(getdays.getMonth()+1)+"-"+getdays.getDate();
            return getday;
        }

demo源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
<script>
    $(function () {

        var strTime="2011-04-16";
        //调用封装好的方法
        getTheDay(strTime);
        console.log(getTheDay(strTime))

        function getTheDay(strTime) {
            //将获取的字符转转换为 new date
            var date= new Date(Date.parse(strTime.replace(/-/g,"/")));
            //获取该天是周几
            var datnum=date.getDay();
            //调用addDay方法获取本周一new date
            console.log(date.getTime())
            var getdays = addDay(-datnum+1,date);
            console.log(getdays.getDay())
            //将得到的new date转换为时间
            var getday = getdays.getFullYear()+"-"+(getdays.getMonth()+1)+"-"+getdays.getDate();
            return getday;
        }

        // 方法 增添dayNumber天(整形),date:如果没传就使用今天(日期型)
        function addDay(dayNumber, date) {
            date = date ? date : new Date();
            var ms = dayNumber * (1000 * 60 * 60 * 24);
            var newDate = new Date(date.getTime() + ms);
            return newDate;
        }
    })
</script>
</body>
</html>
View Code

 

 

 

  钻研不易,转载请注明出处。

转载于:https://www.cnblogs.com/s313139232/p/10313588.html

<template> <div class="date-picker-container"> <!-- 左侧日期选择器 --> <el-date-picker v-model="currentDate" type="date" format="yyyy-MM-dd" placeholder="选择日期" @change="handleDateChange"> </el-date-picker> <!-- 右侧星期Tabs --> <el-tabs v-model="activeDay" type="card" @tab-click="handleTabClick"> <el-tab-pane v-for="(day, index) in weekDays" :key="index" :label="day.label" :name="day.value.toString()"> </el-tab-pane> </el-tabs> </div> </template> <script> export default { data() { return { currentDate: new Date(), // 当前选中日期 activeDay: '1', // 当前选中星期(1-7) weekDays: [] // 当前周日期数组 }; }, mounted() { this.updateWeekDays(); }, methods: { // 计算当周日期 (周一到周日) updateWeekDays() { const date = new Date(this.currentDate); const day = date.getDay(); // 0=周日, 1=周一...6=周六 // 获取本周日期 (当为周日时特殊处理) const monday = new Date(date); monday.setDate(date.getDate() - (day === 0 ? 6 : day - 1)); // 生成周一到周日数据 this.weekDays = Array.from({ length: 7 }).map((_, i) => { const d = new Date(monday); d.setDate(monday.getDate() + i); return { value: i + 1, // 星期索引 (1-7) date: d, // 实际日期对象 label: `周${['一','二','三','四','五','六','日'][i]}` }; }); // 更新当前选中星期 this.activeDay = (day === 0 ? 7 : day).toString(); }, // 左侧日期选择器变化 handleDateChange(date) { this.currentDate = date; this.updateWeekDays(); // 更新右侧Tab }, // 右侧Tab点击 handleTabClick(tab) { const dayIndex = Number(tab.name) - 1; // 更新当前日期为对应星期日期 this.currentDate = this.weekDays[dayIndex].date; } } }; </script> <style lang="scss"> .date-picker-container { display: flex; gap: 20px; .el-tabs { flex: 1; .el-tabs__item { padding: 0 15px; height: 32px; line-height: 32px; } } } </style> 完善代码,最大日期选择为2099年12月31日,当日期选择范围在2099年最后一周是,不可选择的日期与tab同步为disbled状态
06-18
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值