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

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);//截取字符串“年”的部分: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>

相关文章:

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

年月日期控件 type"date" <input type"date" id"StartDate" valueDateTime.Now.ToString("yyyy-MM-dd") /> //设置值 $("#StartDate").val("2024-12-12"); //获取值 var StartDate$("#StartDate&quo…...

CSS系列(12)-- 响应式设计详解

前端技术探索系列&#xff1a;CSS 响应式设计详解 &#x1f4f1; 致读者&#xff1a;掌握响应式设计的艺术 &#x1f44b; 前端开发者们&#xff0c; 今天我们将深入探讨 CSS 响应式设计&#xff0c;学习如何创建适应各种设备的网页布局。 响应式基础 &#x1f680; 视口设…...

filecoin boost GraphQL API 查询

查询示例 查询失败交易 curl -X POST \ -H "Content-Type: application/json" \ -d {"query":"query { deals(limit: 10, query: \"failed to get size of imported\") { deals { ID CreatedAt Message } } }"} \ http://localhost:…...

SAS - Subtractive Port

在SAS&#xff08;串行连接SCSI&#xff0c;Serial Attached SCSI&#xff09;协议中&#xff0c;subtractive port 是一种特殊类型的端口&#xff0c;主要用于设备间的路由功能。它的作用是在路径选择过程中充当默认路径&#xff0c;以处理未明确指定路径的请求。以下是它的定…...

TCP客户端模拟链接websocket服务端

因一些特殊原因研究了下TCP模拟链接websocket。原理上可以连接但具体怎么连接怎么操作就不知道了&#xff0c;需要研究下&#xff0c;以下是个人研究的方案。 用线上和本地地址来做例子&#xff1a; 线上wss地址&#xff1a;wss://server.cs.com/cs/vido/1 本地地址ws://127…...

TypeScript 的崛起:全面解析与深度洞察

一、背景与起源 &#xff08;一&#xff09;JavaScript 的局限性 类型系统缺失 难以在编码阶段发现类型相关错误&#xff0c;导致运行时错误频发。例如&#xff0c;将字符串误当作数字进行数学运算&#xff0c;可能在运行时才暴露问题。函数参数类型不明确&#xff0c;容易传入…...

c#笔记2024

Ctrl r e自动添加get和set CompositeCurve3d 复合曲线 List<Entity> entS listline.Cast<Entity>().ToList();//list类型强转 前面拼上\u0003&#xff0c;就可以实现&#xff0c;不管有没有命令都能打断当前命令的效果 取消其他命令&#xff1a;Z.doc.SendStri…...

Hadoop一课一得

Hadoop作为大数据时代的奠基技术之一&#xff0c;自问世以来就深刻改变了海量数据存储与处理的方式。本文将带您深入了解Hadoop&#xff0c;从其起源、核心架构、关键组件&#xff0c;到典型应用场景&#xff0c;并结合代码示例和图示&#xff0c;帮助您更好地掌握Hadoop的实战…...

AI生成图表化:深入探索Mermaid

引言 在使用生成式AI时&#xff0c;只要你提出让AI帮你生成mermaid图&#xff0c;AI的生成就会出现丰富的图形&#xff01; 在现代文档编写中&#xff0c;图表的使用不仅能增强文档的可读性&#xff0c;还能更直观地表达复杂的概念和流程。Mermaid 作为一款开源的图表绘制工具…...

25.DDD数量关系

学习视频来源&#xff1a;DDD独家秘籍视频合集 https://space.bilibili.com/24690212/channel/collectiondetail?sid1940048&ctype0 文章目录 关系型数据库的数量关系领域模型的数量关系实现聚合数量关系聚合内聚合间具体说明代码 数量关系是本质吗&#xff1f;领域对象之…...

Linux应用开发————线程池

线程池 定义&#xff1a;简单来说&#xff0c;就是存放多个线程的池子。当创建线程池时&#xff0c;就给池中存放一些线程&#xff0c;如果有任务要执行&#xff0c;就从池中取出一个线程执行任务&#xff0c;依次类推&#xff1b;当所有线程都在执行任务时&#xff0c;其他任务…...

Spring Boot 集成阿里云OSS 完成文件上传下载

前言&#xff1a; 文件上传下载在项目开发中是一个非常常见的业务场景&#xff0c;在云服务上还没有兴起的时候&#xff0c;一般来说都会把文件单独存放到文件服务器上&#xff0c;随着云服务的兴起&#xff0c;各类云服务厂商都提供了 OSS 服务&#xff0c;本篇我们分享 Spri…...

使用ERA5数据绘制风向玫瑰图的简易流程

使用ERA5数据绘制风向玫瑰图的简易流程 今天需要做一个2017年-2023年的平均风向的统计,做一个风向玫瑰图&#xff0c;想到的还是高分辨率的ERA5land的数据&#xff08;0.1分辨率&#xff0c;逐小时分辨率&#xff0c;1950年至今&#xff09;。 风向&#xff0c;我分为了16个&…...

测试脚本并发多进程:pytest-xdist用法

参考&#xff1a;https://www.cnblogs.com/poloyy/p/12694861.html pytest-xdist详解&#xff1a; https://www.cnblogs.com/poloyy/p/14708825.html 总 https://www.cnblogs.com/poloyy/category/1690628.html...

数据可视化的Python实现

一、GDELT介绍 GDELT ( www.gdeltproject.org ) 每时每刻监控着每个国家的几乎每个角落的 100 多种语言的新闻媒体 -- 印刷的、广播的和web 形式的&#xff0c;识别人员、位置、组织、数量、主题、数据源、情绪、报价、图片和每秒都在推动全球社会的事件&#xff0c;GDELT 为全…...

【Linux系列】Linux 系统配置文件详解:`/etc/profile`、`~/.bashrc` 和 `~/.bash_profile`

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

uni-app实现小程序、H5图片轮播预览、双指缩放、双击放大、单击还原、滑动切换功能

前言 这次的标题有点长&#xff0c;主要是想要表述的功能点有点多&#xff1b; 简单做一下需求描述 产品要求在商品详情页的头部轮播图部分&#xff0c;可以单击预览大图&#xff0c;同时在预览界面可以双指放大缩小图片并且可以移动查看图片&#xff0c;双击放大&#xff0…...

游戏引擎学习第45天

仓库: https://gitee.com/mrxiao_com/2d_game 回顾 我们刚刚开始研究运动方程&#xff0c;展示了如何处理当人物遇到障碍物时的情况。有一种版本是角色会从障碍物上反弹&#xff0c;而另一版本是角色会完全停下来。这种方式感觉不太自然&#xff0c;因为在游戏中&#xff0c;…...

electron常用方法

一&#xff0c;,electron设置去除顶部导航栏和menu 1&#xff0c;electron项目 在创建BrowserWindow实例的main.js页面添加frame&#xff1a;false属性 2&#xff0c;electron-vue项目 在src/main/index.js文件下找到创建窗口的方法&#xff08;createWindow&#xff09;&…...

【Spark】Spark Join类型及Join实现方式

如果觉得这篇文章对您有帮助&#xff0c;别忘了点赞、分享或关注哦&#xff01;您的一点小小支持&#xff0c;不仅能帮助更多人找到有价值的内容&#xff0c;还能鼓励我持续分享更多精彩的技术文章。感谢您的支持&#xff0c;让我们一起在技术的世界中不断进步&#xff01; Sp…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...