JS操作日期，实现上一周和下一周日期跳转。
<html>
<head>
<script>
var currDT;
var aryDay = new Array("日","一","二","三","四","五","六");//显示星期
var lastDay;//页面显示的最后一天
var firstDay;//页面显示的第一天
//初始化日期加载
function initDate() {
currDT = new Date();
showdate.innerHTML = currDT.toLocaleDateString(); //显示日期
var dw = currDT.getDay();//从Date对象返回一周中的某一天(0~6)
var tdDT;//日期
//在表格中显示一周的日期
var objTB = document.getElementById("mytable");//取得表格对象
for(var i=0;i<7;i++) {
tdDT = getDays()[i];
if(tdDT.toLocaleDateString() == currDT.toLocaleDateString()) {
objTB.rows[0].cells[i].style.color = "red";//currDT突出显示
}
dw = tdDT.getDay();//星期几
objTB.rows[0].cells[i].innerHTML = tdDT.getMonth()+1 + "月" + tdDT.getDate() + "日 星期" + aryDay[dw];//显示
}
//重新赋值
lastDay = getDays()[6];//本周的最后一天
firstDay = getDays()[0];//本周的第一天
}
//取得当前日期一周内的某一天
function getWeek(i) {
var now = new Date();
var n = now.getDay();
var start = new Date();
start.setDate(now.getDate() - n + i);//取得一周内的第一天、第二天、第三天...
return start;
}
//取得当前日期一周内的七天
function getDays() {
var days = new Array();
for(var i=1;i<=7;i++) {
days[i-1] = getWeek(i);
}
return days;
}
//取得下一周的日期数(共七天)
function getNextWeekDatas(ndt) {
var days = new Array();
for(var i=1;i<=7;i++) {
var dt = new Date(ndt);
days[i-1] = getNextWeek(dt,i);
}
return days;
}
//指定日期的下一周(后七天)
function getNextWeek(dt,i) {
var today = dt;
today.setDate(today.getDate()+i);
return today;
}
//取得上一周的日期数(共七天)
function getPreviousWeekDatas(ndt) {
var days = new Array();
for(var i=-7;i<=-1;i++) {
var dt = new Date(ndt);
days[7+i] = getPreviousWeek(dt,i);
}
return days;
}
//指定日期的上一周(前七天)
function getPreviousWeek(dt,i) {
var today = dt;
today.setDate(today.getDate()+i);
return today;
}
//下一周
function nextWeek() {
setCurrDTAfter();//重设时间
showdate.innerHTML = currDT.toLocaleDateString(); //显示日期
//在表格中显示一周的日期
var objTB = document.getElementById("mytable");//取得表格对象
var dw = currDT.getDay();//从Date对象返回一周中的某一天(0~6)
var tdDT;//日期
for(var i=0;i<7;i++) {
tdDT = getNextWeekDatas(lastDay)[i];
if(tdDT.toLocaleDateString()==currDT.toLocaleDateString()) {
objTB.rows[0].cells[i].style.color = "red";//currDT突出显示
}
dw = tdDT.getDay();//星期几
objTB.rows[0].cells[i].innerHTML = tdDT.getMonth()+1 + "月" + tdDT.getDate() + "日 星期" + aryDay[dw]; //显示
}
//重新赋值
firstDay = getNextWeekDatas(lastDay)[0];//注意赋值顺序1
lastDay = getNextWeekDatas(lastDay)[6];//注意赋值顺序2
}
//上一周
function previousWeek() {
settCurrDTBefore();
showdate.innerHTML = currDT.toLocaleDateString(); //显示日期
//在表格中显示一周的日期
var objTB = document.getElementById("mytable");//取得表格对象
var dw = currDT.getDay();//从Date对象返回一周中的某一天(0~6)
var tdDT;//日期
for(var i=0;i<7;i++) {
tdDT = getPreviousWeekDatas(firstDay)[i];
if(tdDT.toLocaleDateString()==currDT.toLocaleDateString()) {
objTB.rows[0].cells[i].style.color = "red";//currDT突出显示
}
dw = tdDT.getDay();//星期几
objTB.rows[0].cells[i].innerHTML = tdDT.getMonth()+1 + "月" + tdDT.getDate() + "日 星期" + aryDay[dw];//显示
}
//重新赋值
lastDay = getPreviousWeekDatas(firstDay)[6];//注意赋值顺序1
firstDay = getPreviousWeekDatas(firstDay)[0];//注意赋值顺序2
}
//当前日期后第七天
function setCurrDTAfter() {
currDT.setDate(currDT.getDate()+7);
}
//当前日期前第七天
function settCurrDTBefore() {
currDT.setDate(currDT.getDate()-7);
}
</script>
</head>
<body onload="initDate()">
<table align="center">
<tr>
<td>
<input type="button" name="previousweek" value="上一周" onclick="previousWeek();"/>
<span id="showdate"></span>
<input type="button" name="previousweek" value="下一周" onclick="nextWeek();"/>
</td>
</tr>
</table>
<!--显示日期-->
<table id="mytable" cellspacing="0" border=="1" align="center" width="90%">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
本文详细介绍了如何使用JavaScript实现日期的上下周切换功能，包括如何获取当前日期、计算每月和每年的周数，以及如何实现前后一周的日期切换。这些技术对于构建涉及日期操作的应用程序非常有用，尤其是那些需要显示...
Date.prototype.isLeapYear 判断闰年 ...Date.prototype.WeekNumOfYear 判断日期所在年的第几周 StringToDate 字符串转日期型 IsValidDate 验证日期有效性 CheckDateTime 完整日期时间检查 daysBetween 日期天数差
这个文件讨论的主题是如何使用JavaScript来操作日期，并实现特定功能，如显示上一周和下一周的日期。 ### 知识点解析： #### 1. JavaScript日期对象 在JavaScript中，处理日期和时间的标准方式是使用Date对象。...
《周日历js插件——weeklyCalendar：专为一周日期展示设计》 在现代Web开发中，日历插件是不可或缺的一部分，它们为用户提供了直观的时间管理方式。本文将深入探讨一个专注于一周日期显示的JavaScript插件——...
有两个按钮，分别对应“上一周”和“下一周”。点击“上一周”按钮时，`setDate`函数被调用，并传入`addDate(currentFirstDate,-7)`，即当前日期减去7天，以获取上一周的星期一开始的日期。点击“下一周”按钮时，...
**原理**：如果日期1所在周的星期天和日期2所在周的星期天是同一天，那么这两个日期在同一周。 ```csharp public static bool IsInSameWeek1(DateTime dtS, DateTime dtE) { return ((dtE - new TimeSpan(Convert....
### JavaScript 生成一周的时间 #### 知识点概述 本文将详细介绍如何利用JavaScript来动态生成一个包含当前日期所在周的所有日期的小程序。该程序能够显示当前周的每一天，并且允许用户通过点击按钮来查看前一周或...
下面将详细解释如何通过JS实现这个功能，并且考虑到周的起始日期可以自定义，这里设定为礼拜四开始，礼拜五结束，允许跨年和跨月。 首先，我们来看`getWeekStartDate`函数，它的目的是获取指定日期所在周的起始日期...
本文将详细讲解如何根据给定的标题和描述，利用Java编程语言来判断当前日期是否在本月的最后一周内，以及如何判断日期是否在某一周内的最后几天、前几天或24小时内。 首先，我们需要引入Java的`java.time`包，这个...
在JavaScript中，日期对象（`Date`）提供了丰富的API来处理日期和时间相关的操作。日期对象可以用来获取当前日期和时间、解析特定格式的日期字符串，并执行日期之间的加减运算等。在本示例中，我们将通过创建日期...
综上所述，"js 周控件修正版"是基于JavaScript实现的，用于网页上的日期显示和交互，特别适合于需要按周规划的场景。它的修正版针对原版的不足进行了优化，提高了性能和用户体验，并且可能增加了更多的定制化选项。...
该函数返回指定日期是一周中的哪一天。 **参数说明：** - `date` (String/Object): 日期，可以是字符串格式（"YYYY-MM-DD"）或者 Date 对象。 **示例代码：** ```javascript var dayOfWeek = WeekDay("2023-09-...
在实际项目中，确保在多种浏览器和设备上测试日期控件的功能和样式，确保其在各种环境下都能正常工作。 总结，创建一个JavaScript实现的日期控件涉及HTML布局、CSS样式、JavaScript事件处理以及交互设计等多个方面...
在JavaScript中，动态显示日期和时间是一项常见的需求，特别是在网页应用中。本文将详细解析如何使用JavaScript实现这一功能，特别是通过实例代码来说明具体的实现步骤。 首先，我们要明白JavaScript中的`Date`对象...
2. **设置星期一为起始日**：默认情况下，JavaScript的`Date`对象将周日作为一周的第一天。但根据需求，我们可以调整，例如使用`getDayOfWeek()`（自定义方法）来确定星期一作为一周的开始。 3. **生成日历表格**：...
4. **快速选择**：提供快速选择今天、昨天、明天或者上/下一周、上/下一个月的选项，这可以通过添加按钮到toolbar实现。 5. **事件处理**：当用户选择日期后，触发相应的回调函数，以便在其他地方使用选择的日期。 ...
`calendar`和`js`标签暗示了我们将在JavaScript环境中讨论如何实现一个小型的日历功能。在本文中，我们将深入探讨JavaScript中的日期对象（Date Object）、日期方法以及如何利用它们创建一个基本的日历组件。 ...
以下是对几款优秀的JavaScript日期插件的详细说明，这些插件能够帮助你精确到日期、小时、分钟甚至秒，提升你的项目质量。 1. **jQuery UI Datepicker** jQuery UI的Datepicker是广泛使用的日期选择器插件，它可以...