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>
相关推荐
我命由我1234541 分钟前
Kotlin 数据容器 - List(List 概述、创建 List、List 核心特性、List 元素访问、List 遍历)
java·开发语言·jvm·windows·java-ee·kotlin·list
武子康3 小时前
Java-80 深入浅出 RPC Dubbo 动态服务降级:从雪崩防护到配置中心秒级生效
java·分布式·后端·spring·微服务·rpc·dubbo
灵感__idea3 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴4 小时前
Mix
前端·webgl
代码续发5 小时前
前端组件梳理
前端
试图让你心动5 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
YuTaoShao5 小时前
【LeetCode 热题 100】131. 分割回文串——回溯
java·算法·leetcode·深度优先
陈不知代码6 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记6 小时前
sass中@mixin与 @include
前端·sass
源码_V_saaskw6 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友