从下拉框中选择年份和该年的周数，计算出该周的开始日期和结束日期

最新推荐文章于 2024-08-08 09:13:38 发布
转载 最新推荐文章于 2024-08-08 09:13:38 发布 · 2.5k 阅读 · 0
文章标签：

#generator #function #xhtml #string #date #html

本文介绍了一个在线日期转换工具，能够根据用户输入的年份和周数，精确计算出该周的第一天和最后一天的具体日期。通过内部循环和函数调用，实现对不同年份和周数的灵活转换，帮助用户快速获取所需日期信息。

 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">  
<head>    
<title>js.Date.convertWeekNumberToFirstDate.html </title>    
<meta name="generator" content="editplus" />    
<meta name="author" content="yixianggao@126.com" />    
<meta name="keywords" content="" />    
<meta name="description" content="" />  
</head>     
<body>    
<select id="sltYear"> </select>    
<select id="sltWeek"> </select>    
<span id="spnDate"></span>—<span id="lpnDate"></span>
<script type="text/javascript">    
<!-- 
$ = document.getElementById; 
var oYear = $("sltYear");  //从循环中获取年份
var oWeek = $("sltWeek");  //从循环中获取周数
var oDate = $("spnDate"); //周数对应的周一的日期
var lDate = $("lpnDate"); //周数对应的周五的日期
/*
*先获取当前年份，然后当年分小于2020年时，循环获取
*从2011年到2020年的一个数组
*/
for (var i=(new Date()).getFullYear(); 2000<= i <=2020; i++){   
oYear.add(new Option(i+"年", i)); 
} 
/*
*循环获取从第一周到第52周的一个数组
*/
for (var i=1; i <=52; i++)  {   
oWeek.add(new Option(i+"周", i)); 
} 
/*  
* sYear: string, 年份；  
* sWeek: string, 周数；  
* startFromFirstMonday: boolean, 是否从每年第一天开始计算周数，  
* true: 从每年第一天开始计算周数；false: 从每年第一个周一开始计算周数。  
*/ 
function convertWeekNumberToFirstDate(sYear, sWeek, startFromFirstMonday)  {   
if (startFromFirstMonday == undefined)
 startFromFirstMonday = true;     
var weekIndex = 1;     
var year = parseInt(sYear);   
var week = parseInt(sWeek);     
var i = 1;   
var dFirstDate = new Date(year, 0, i);     
if (!startFromFirstMonday){    
   if (weekIndex  < week){     
      weekIndex++;    
   }else     
   return dFirstDate;   
   }     
   if (dFirstDate.getDay() != 1){    
   i += 7 - dFirstDate.getDay() + 1;    
   dFirstDate.setFullYear(year, 0, i);   
   }     
   if (weekIndex  < week){    
   i += 7*(week-weekIndex);    
   dFirstDate.setFullYear(year, 0, i);   
   }   
    return dFirstDate; 
}   
function displayDate()  {   
var dFirstDate = convertWeekNumberToFirstDate(oYear.value, oWeek.value);   
oDate.innerHTML = dFirstDate.getFullYear()+"-"+(dFirstDate.getMonth()+1)+"-"+dFirstDate.getDate(); 
lDate.innerHTML = dFirstDate.getFullYear()+"-"+(dFirstDate.getMonth()+1)+"-"+(dFirstDate.getDate()+4); 
}   
displayDate(); 
oYear.onchange = oWeek.onchange = displayDate;     
//-->   
</script>   
</body>  
</html>

运行结果如图：

当选择年份和周数的时候，后面的日期段会随着对应变化

周选择下拉控件
03-27
周选择下拉控件 取值、赋值 显示内容2016年第11周(3.6-3.12)
jquery easyui 周历 周选择下拉控件
11-24
基于jquery easyui改造的周选择控件 可指定周起始星期，默认周日为本周的第一天
点击下拉框中的值,展示对应的一周日期
qq_42314883的博客
01-15 424
请选择 本周 下1周 下2周 下3周
js 写 select 对应年的 自然周-日期 动态下拉列
08-25 1097
1  a.jsp         2   a.js      if($.isEmpty($("#weekSelect").val())){                 initWeek();       }      function initWeek(){         var year = '2017';         var text = year +
周数选择
鱼头小丸子的博客
05-09 376
最近在做一个选课之类的项目，其中有一个周数选择，先上效果图 1.对话框文件dialog_week_select.xml xml version="1.0" encoding="utf-8"?> LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="2
日月年和周范围选择,文章可能太长，只能上传包
01-23
- 对于周范围，可能需要计算出实际的起始日期和结束日期，因为一周的开始和结束日可能会跨过两个实际日期。 5. **本地化支持** - 考虑到全球化的应用，日期格式和一周的开始日可能需要根据用户的地区设置进行调整...
帆软报表中，有按钮控件1W~5W，点击后，startdate 和 enddate 自动跳转至当前系统月份第1周或者第5周的开始日期和结束日期；如何设置？
最新发布
11-12
将计算出的开始日期和结束日期赋值给报表中的日期控件（startdate和enddate） 步骤分解： 步骤1：准备日期计算函数（可复用之前的第一周计算，并扩展为任意周） 步骤2：在按钮点击事件中调用该函数，传入周数...
在帆软报表中如何实现周次选择器与日期范围的联动？
11-12
根据选择的周次计算出对应的日期范围（起始日期和结束日期） 3. 将计算出的日期范围传递给报表参数或控件，实现数据过滤 核心问题在于如何根据周次计算日期范围。这里我们假设周次选择器中的周次是指当前月内的...
帆软报表中有1个startdate和endate,，还有5个week控件，需要点击1W的时候，startdate和endate自动将日期跳到当月第1W，点击2W的时候，startdate和endate自动将日期跳到当月第2W，以此类推总共5W。 说清楚步骤
11-12
- 设置控件的点击事件，通过JavaScript来实现当点击某个周按钮时，根据当前月份和选择的周数计算出该周的开始日期（周一）和结束日期（周日），然后将这两个日期分别赋值给startdate和enddate参数控件，并触发查询...
jQueryUI日期选择器：简化日期输入的利器
而人们想到日期时，自然会联想到日历，因此让用户从日历显示中选择日期是最自然的方式。jQuery UI 日期选择器正是解决这一问题的有效工具。 #### 2. 让悬停项突出显示 若想让悬停的项目突出显示，可将其边框颜色改...
周选择插件jcalendarweek
11-15
一个基于jquery的周日历插件，支持选择并跳转到指定年份和周。 插件中周的算法：每周以周日为起始，以每年第一个星期四所在的周为年内第一周。
周下拉框控件.7z
06-04
下拉框中的数据是（2019-05-27~2019-06-02）、（2019-06-03~2019-06-09）、（2019-06-10~2019-06-16）、（2019-06-117~2019-06-23）每一个选项都是从周一到周日，根据年月动态生成。下载就可以运行
获取一年的周历列表
jovi_zhao的博客
08-17 1584
public class CalendarUtil { /** * 获取周历，周一为第一天 * 返回Map * eg: * wk_fisrt_day:2018-06-11 * wk_fisrt_day_md:06.11 * wk_end_day:2018-06-17 * wk_fisrt_day_md:06.17 * * @param ...
年月周下拉框，周会随月改变
weixin_30338743的博客
12-08 217
<#assign basePath=request.contextPath /> <!DOCTYPE html> <html> <head> <title>首页</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8...
自动加载下拉列表年、月、周
八月长安w的博客
09-21 966
public class Utils { /** * 得到下拉的年份 * * @return */ public static Map getSelectYear() { Map defaultYear = new LinkedHashMap(); defaultYear.put("2014", 2014); defaultYear.put("2015", 20
element-ui周选择器，如何获取年、周、起止日期？
yan1915766026的博客
08-08 2087
怎么根据周选择器，得到年、周、起止日期
html 周选择器,原生js周选择器
weixin_35671421的博客
06-04 422
无标题文档 var curD = new Date(); var firstD = new Date(); var lastD = new Date(); var dayTime = 24*60*60*1000 ; function initDate(){ curD.setHours(12,12,12,0); var dateLong = curD.getTime(); ...
Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）(转)...
07-16 285
<script type="text/javascript"> // 1.判断select选项中 是否存在Value="paraValue"的Item function jsSelectIsExitItem(objSelect, objItemValue) { var isExit = false; ...
在div中添加一个下拉框，下拉框选择为当前年份和下一年年份
06-25
要实现在网页中动态向 `div` 容器内添加一个包含**当前年份**和**下一年年份**选项的 `<select>` 元素，可以通过 JavaScript 动态创建元素并插入到指定的 `div` 中。以下是完整的实现方式： ### 创建 HTML 结构 首先，在 HTML 页面中定义一个 `div` 容器，用于承载动态生成的下拉框。 ```html <div id="yearSelectContainer"></div> ``` ### 使用 JavaScript 动态生成下拉框 接下来使用 JavaScript 获取当前年份，并构建包含当前年份和下一年年份的 `<select>` 元素。 ```javascript // 获取当前年份 const currentYear = new Date().getFullYear(); // 下一年年份 const nextYear = currentYear + 1; // 创建 select 元素 const selectElement = document.createElement("select"); selectElement.id = "yearSelector"; // 创建 option 元素并添加到 select 中 const currentYearOption = document.createElement("option"); currentYearOption.value = currentYear; currentYearOption.textContent = currentYear; selectElement.appendChild(currentYearOption); const nextYearOption = document.createElement("option"); nextYearOption.value = nextYear; nextYearOption.textContent = nextYear; selectElement.appendChild(nextYearOption); // 将 select 元素插入到 div 容器中 document.getElementById("yearSelectContainer").appendChild(selectElement); ``` ### 样式优化（可选） 为了增强用户体验，可以为下拉框添加一些基础样式。 ```css #yearSelectContainer select { padding: 8px; font-size: 16px; border-radius: 4px; border: 1px solid #ccc; } ``` ### 扩展功能：监听选择变化事件 如果需要在用户选择年份后执行某些操作，例如更新页面内容或发送请求，可以添加事件监听器。 ```javascript selectElement.addEventListener("change", function () { const selectedYear = this.value; alert(`您选择了年份：${selectedYear}`); }); ``` ### 示例完整代码 以下是一个完整的 HTML 示例，整合了上述所有部分： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>动态年份下拉框</title> <style> #yearSelectContainer select { padding: 8px; font-size: 16px; border-radius: 4px; border: 1px solid #ccc; } </style> </head> <body> <div id="yearSelectContainer"></div> <script> // 获取当前年份 const currentYear = new Date().getFullYear(); const nextYear = currentYear + 1; // 创建 select 元素 const selectElement = document.createElement("select"); selectElement.id = "yearSelector"; // 添加当前年份选项 const currentYearOption = document.createElement("option"); currentYearOption.value = currentYear; currentYearOption.textContent = currentYear; selectElement.appendChild(currentYearOption); // 添加下一年年份选项 const nextYearOption = document.createElement("option"); nextYearOption.value = nextYear; nextYearOption.textContent = nextYear; selectElement.appendChild(nextYearOption); // 插入到容器中 document.getElementById("yearSelectContainer").appendChild(selectElement); // 监听 change 事件 selectElement.addEventListener("change", function () { const selectedYear = this.value; alert(`您选择了年份：${selectedYear}`); }); </script> </body> </html> ```
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值