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>
相关推荐
mghio30 分钟前
Dubbo 中的集群容错
java·微服务·dubbo
范文杰2 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪2 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪3 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy3 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom4 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom4 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom4 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom4 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试