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

年月日期控件  type="date"

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

 

---

时间控件  type="datetime-local"

<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"

<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"

<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"

<input id="time" type="time" value="23:38">

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

---

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

<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>