当前位置: 首页 > 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…...

meta llama 大模型一个基础语言模型的集合

LLaMA 是一个基础语言模型的集合&#xff0c;参数范围从 7B 到 65B。我们在数万亿个 Token 上训练我们的模型&#xff0c;并表明可以专门使用公开可用的数据集来训练最先进的模型&#xff0c;而无需诉诸专有的和无法访问的数据集。特别是&#xff0c;LLaMA-13B 在大多数基准测试…...

JAVA爬虫获取1688关键词接口

以下是使用Java爬虫获取1688关键词接口的详细步骤和示例代码&#xff1a; 一、获取API接口访问权限 要使用1688关键词接口&#xff0c;首先需要获取API的使用权限&#xff0c;并了解接口规范。以下是获取API接口的详细步骤&#xff1a; 注册账号&#xff1a;在1688平台注册一…...

操作系统——内存管理

1、什么是虚拟内存&#xff1f;它是如何实现的&#xff1f;虚拟内存与物理内存之间有什么关系&#xff1f; 虚拟内存是操作系统提供的一种内存管理机制&#xff0c;它使程序认为自己拥有连续的内存空间&#xff0c;但实际上内存可能被分散存储在物理内存和磁盘交换空间中。 虚…...

android studio 模拟器不能联网?

模拟器路径&#xff1a; C:\Users\Administrator\AppData\Local\Android\Sdk\emulator\emulator.exe.关闭所有AVD设备实例 导航至&#xff1a; C:\Users\userName\AppData\Local\Android\Sdk\emulator查看模拟器名称 AdministratorDESKTOP-6JB1OGC MINGW64 ~/AppData/Local/…...

CTF-WEB: 目录穿越与模板注入 [第一届国城杯 Ez_Gallery ] 赛后学习笔记

step1 验证码处存在逻辑漏洞,只要不申请刷新验证码就一直有效 字典爆破得到 admin:123456 step2 /info?file../../../proc/self/cmdline获得 python/app/app.py经尝试,读取存在的目录时会返回 A server error occurred. Please contact the administrator./info?file.…...

数据结构6.4——归并排序

基本思想&#xff1a; 归并排序是建立在归并操作上的一种有效的排序算法&#xff0c;该算法是采用分治法的一个非常典型的应用。将已有的子序列合并&#xff0c;得到完全有序的序列&#xff1b;即先使每个子序列有序&#xff0c;再使子序列段间有序。若将两个有序表合并成一个…...

【html 常用MIME类型列表】

本表仅列出了常用的MIME类型&#xff0c;完整列表参考文档。 浏览器通常使用 MIME 类型&#xff08;而不是文件扩展名&#xff09;来确定如何处理 URL&#xff0c;因此 Web 服务器在响应头中添加正确的 MIME 类型非常重要。 如果配置不正确&#xff0c;浏览器可能会曲解文件内容…...

Linux之vim编辑器

vi编辑器是所有Unix及linux系统下标准的编辑器&#xff0c;类似于Windows系统下的记事本。很多软件默认使用vi作为他们编辑的接口。vim是进阶版的vi&#xff0c;vim可以视为一种程序编辑器。 前言&#xff1a; 1.文件准备 复制 /etc/passwd文件到自己的目录下&#xff08;不…...

【工具介绍】可以批量查看LableMe标注的图像文件信息~

在图像处理和计算机视觉领域&#xff0c;LabelMe是一个广泛使用的图像标注工具&#xff0c;它帮助我们对图像中的物体进行精确的标注。但是&#xff0c;当标注完成后&#xff0c;我们常常需要一个工具来批量查看这些标注信息。 今天&#xff0c;我要介绍的这款exe程序&#xf…...

2024年山西省第十八届职业院校技能大赛 (高职组)“信息安全管理与评估”赛项规程

2024年山西省第十八届职业院校技能大赛 &#xff08;高职组&#xff09;“信息安全管理与评估”赛项规程 一、赛项名称 赛项名称&#xff1a;信息安全管理与评估 英文名称&#xff1a;Information Security Management and Evaluation 赛项组别&#xff1a;高职教师组 赛项归属…...

wordpress显示图片/如何免费做视频二维码永久

Transaction Flow 本文概述了在标准资产交换过程中发生的事务机制。这个场景包括两个客户&#xff0c;A和B&#xff0c;他们在购买和销售萝卜&#xff08;产品&#xff09;。他们每个人在网络上都有一个peer&#xff0c;通过这个网络&#xff0c;他们发送自己的交易&#xff0c…...

vivo浏览器下载/优化设计六年级上册语文答案

之前谈过doctype的问题&#xff0c;被忽视的DOCTYPE&#xff0c;最末说了提倡使用<!DOCTYPE HTML>&#xff0c;最简洁明了且是标准模式。 但是最近发现使用这种方式会产生问题&#xff0c;见代码&#xff1a; <!DOCTYPE HTML> <html> <head> <title…...

南京铁路建设网站/推广普通话手抄报模板

1. 命令行方式 前言介绍: 要知道一个表占用空间的大小&#xff0c;那就相当于是 数据大小 索引大小 即可。 show databases; (查看有多少 database, 也叫做table schema; 有点串用) 1.1 查看单个database(或是table schema)占用的大小 select sum(DATA_LENGTH)sum(INDEX_LENG…...

企业网站公示怎么做/青岛谷歌优化公司

最近在做番茄钟的功能。首先简单介绍一下番茄钟吧&#xff0c;就是25分钟工作番茄工作法。先说一下** 番茄工作法 **&#xff1a; 番茄工作法是简单易行的时间管理方法&#xff0c;是由弗朗西斯科西里洛于1992年创立的一种相对于GTD更微观的时间管理方法。 使用番茄工作法&…...

为把网站建设更好/百度学术官网入口网页版

IP 独立IP数&#xff0c;是不同IP地址的计算机访问网站时被计算的总次数&#xff0c;独立IP数是衡量网站流量的一个重要指标&#xff0c;一般一天内相同IP地址的客户端访问网页只被计算为一次&#xff0c;记录独立IP的时间为一天或一个月&#xff0c;目前通用的标准为“一天” …...

营销型网站建设的特色/外贸谷歌优化

得益于人工智能的发展&#xff0c;人脸识别作为基于脸部特征信息进行身份识别的一种生物识别技术已在更多的领域有着成熟的应用&#xff0c;其中不得不提的就是基于人脸识别所开发的监控智能门禁系统。随着政府智慧小区工程项目的不断推进&#xff0c;小区人脸识别门禁也正在逐…...