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>
相关推荐
Mr__Miss10 分钟前
面试踩过的坑
java·开发语言
爱喝一杯白开水12 分钟前
POI从入门到上手(一)-轻松完成Apache POI使用,完成Excel导入导出.
java·poi
lh_125428 分钟前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx29 分钟前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
向哆哆42 分钟前
Java 安全:如何防止 DDoS 攻击?
java·安全·ddos
啥都想学的又啥都不会的研究生1 小时前
Kubernetes in action-初相识
java·docker·微服务·容器·kubernetes·etcd·kubelet
毅航1 小时前
MyBatis 事务管理:一文掌握Mybatis事务管理核心逻辑
java·后端·mybatis
Mikey_n1 小时前
前台调用接口的方式及速率对比
前端
周之鸥1 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉1 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3