html自带的input年月日(date) /时间(datetime-local)/星期(week)/月份(month)/时间(time)控件

年月日期控件 type="date"

javascript 复制代码
<input type="date" id="StartDate" value='@DateTime.Now.ToString("yyyy-MM-dd")' />
//设置值
$("#StartDate").val("2024-12-12");
//获取值
var StartDate=$("#StartDate").val();

时间控件 type="datetime-local"

javascript 复制代码
<input type="datetime-local" id="StartDate" 
value="@DateTime.Now.ToString("yyyy-MM-dd 00:00")"
min="@DateTime.Now.ToString("yyyy-MM-dd 00:00")" 
max="@DateTime.Now.ToString("yyyy-MM-dd 23:59")" />

//设置值
$("#StartDate").val("2024-12-12T12:30");
//获取值
var StartDate=$("#StartDate").val();

min="..." 日期控件的最小值

max="..."日期控件的最大值

年月日&周&月等 通用此两个属性


星期(周)控件 type="week"

javascript 复制代码
<input type="week" id="week" value="2024-W50">

//设置值
$("#week").val("2024-W42");

//获取值,获取该周的第一天和最后一天(周一到周日)
  var dateString = $("#week").val();//控件值格式为: 'YYYY-WW',如:2024-W42
  //console.log("年度第几周", dateString);
  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天)

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

月份控件 type="month"

javascript 复制代码
<input type="month" id="month" value="2024-12" />

//设置值
 $("#month").val("2024-10");

//获取值(获取该月的第一天和最后一天)
   var obj = $("#month").val();//2024-11
   var StartDate = obj + "-1";//月的第一天,2024-11-1
   const date = new Date(StartDate);//字符串转日期类型
   const year = date.getFullYear();//年
   const month = date.getMonth() + 1; //月份从0开始计算,需要加1
   const lastDay = new Date(year, month, 0).getDate();//下一个月的第0天(即指定日期所在月份的最后一天)
   const EndDate = obj + "-" + lastDay;
  console.log(month +'月的第一天: ' + StartDate);
  console.log(month +'月的最后一天: ' + EndDate);

时间控件 type="time"

javascript 复制代码
<input id="time" type="time" value="23:38">

//设置值
$("#time").val("01:23");
//取值
var time=$("#time").val();

jquery 控制 type="date" 的 min 和 max 属性值

html 复制代码
<input type="date" id="myDateInput">

<script>
$(document).ready(function(){
    // 设置日期输入的最小值为2023-01-01
    $('#myDateInput').attr('min', '2023-01-01');
 
    // 设置日期输入的最大值为2023-12-31
    $('#myDateInput').attr('max', '2023-12-31');
});
</script>
相关推荐
Penk是个码农3 分钟前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye6 分钟前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤11 分钟前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子15 分钟前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
我是一只代码狗26 分钟前
springboot中使用线程池
java·spring boot·后端
hello早上好39 分钟前
JDK 代理原理
java·spring boot·spring
PanZonghui44 分钟前
Centos项目部署之Java安装与配置
java·linux
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang1 小时前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil1 小时前
基于 Vue3实现一款简历生成工具
前端·vue.js