.net 根据html的input type=“week“控件的值获取星期一和星期日的日期

初始化 "week" 控件值:

cs 复制代码
//MVC部分
public ActionResult WeeklyList()
{
    int weekNo = new GregorianCalendar().GetWeekOfYear(System.DateTime.Now, System.Globalization.CalendarWeekRule.FirstDay, DayOfWeek.Sunday);
    string DefaultWeek = DateTime.Now.Year + "-W" + weekNo;//2024-W42
    ViewBag.DefaultWeek = DefaultWeek;//传值到html

    return View();
}

//html部分
<input type="week" id="txt_week" class="my-css" value="@ViewBag.DefaultWeek" />

获取 "week" 控件所选中的星期一和星期日的值

cs 复制代码
        $(function () {
            $("#btnSearch").click(function () {
                var weekPicker = document.getElementById('txt_week');//type=week控件对象
                var dateString = weekPicker.value;//控件值格式为: 'YYYY-WW',如:2024-W42
                var year = parseInt(dateString.substr(0, 4), 10);//截取字符串"年"的部分:2024
                var week = parseInt(dateString.substr(6, 2), 10);//截取字符串"第几周"的部分:42

                //计算日期
                var jsDate = new Date(year, 0, (week - 1) * 7);//生成日期
                var dayOfWeek = jsDate.getDay();
                var dayOffset = dayOfWeek === 1 ? 0 : 1 - dayOfWeek;
                
                var monday = new Date(jsDate.setDate(jsDate.getDate() + dayOffset + 1));//星期一日期
                var sunday = new Date(jsDate.setDate(monday.getDate() + 6));//星期日日期(星期一+6天)

                console.log('星期一: ' + monday.toISOString().substr(0, 10));
                console.log('星期日: ' + sunday.toISOString().substr(0, 10));

            });
        });

实际效果:

说明:

①我选中了week控件的:第42周(即2024年的第42个周,值为:2024-W42,格式为:yyyy-WW)

②截取字符串,获得年:2024,和年度第几周:42,开始计算日期,见js部分

③计算获得:第42周的,星期一是"2024-10-14",星期日是"2024-10-20"

④传递着两个日期值到MVC后台,对数据库进行日期范围的SQL查询


验证:

相关推荐
~小仙女~2 分钟前
组件的二次封装
前端·javascript·vue.js
这是个栗子7 分钟前
AI辅助编程(一) - ChatGPT
前端·vue.js·人工智能·chatgpt
2501_944448008 分钟前
Flutter for OpenHarmony衣橱管家App实战:预算管理实现
前端·javascript·flutter
Remember_99311 分钟前
Spring 核心原理深度解析:Bean 作用域、生命周期与 Spring Boot 自动配置
java·前端·spring boot·后端·spring·面试
笨蛋不要掉眼泪14 分钟前
Redis持久化解析:RDB和AOF的对比
前端·javascript·redis
心.c16 分钟前
Vue3+Node.js实现文件上传分片上传和断点续传【详细教程】
前端·javascript·vue.js·算法·node.js·哈希算法
We་ct17 分钟前
LeetCode 48. 旋转图像:原地旋转最优解法
前端·算法·leetcode·typescript
黄筱筱筱筱筱筱筱27 分钟前
7.适合新手小白学习Python的异常处理(Exception)
java·前端·数据库·python
Yeats_Liao34 分钟前
微调决策树:何时使用Prompt Engineering,何时选择Fine-tuning?
前端·人工智能·深度学习·算法·决策树·机器学习·prompt
晚霞的不甘34 分钟前
Flutter for OpenHarmony 实现 iOS 风格科学计算器:从 UI 到表达式求值的完整解析
前端·flutter·ui·ios·前端框架·交互