当前位置：首页 > news >正文

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

news 2025/6/30 1:49:19

年月日期控件 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);//截取字符串“年”的部分:2024var 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-11var StartDate = obj + "-1";//月的第一天,2024-11-1const date = new Date(StartDate);//字符串转日期类型const year = date.getFullYear();//年const month = date.getMonth() + 1; //月份从0开始计算，需要加1const 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>

查看全文

http://www.lryc.cn/news/503101.html