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

使用JavaScript实现一个复杂功能：日期范围选择器

news 2025/9/16 0:24:58

日期范围选择器是一个常见的Web应用功能，它允许用户选择一个日期范围。在本篇文章中，我们将使用JavaScript来实现这个功能。

一、实现思路

  1. 创建一个开始日期输入框和一个结束日期输入框。

  2. 添加事件监听器，监听开始日期输入框和结束日期输入框的输入事件。

  3. 当用户在输入框中输入日期时，验证输入的日期是否合法，如果合法，则更新日期范围。

  4. 提供清除日期范围的功能

二、代码实现 

 

<!DOCTYPE html>  
<html>  
<head>  <title>日期范围选择器</title>  
</head>  
<body>  <!-- 开始日期输入框 -->  <label for="start-date">开始日期:</label>  <input type="date" id="start-date" oninput="validateDateRange()"> <!-- 当输入框内容变化时，调用validateDateRange函数 -->  <br>  <!-- 结束日期输入框 -->  <label for="end-date">结束日期:</label>  <input type="date" id="end-date" oninput="validateDateRange()"> <!-- 当输入框内容变化时，调用validateDateRange函数 -->  <br>  <!-- 清除日期范围按钮 -->  <button onclick="clearDateRange()">清除日期范围</button> <!-- 当按钮被点击时，调用clearDateRange函数 -->  <p id="date-range"></p> <!-- 用于显示日期范围的段落 -->  <script>  // 验证日期范围的函数  function validateDateRange() {  // 获取开始日期和结束日期的值，并尝试将它们转换为Date对象  var startDate = new Date(document.getElementById("start-date").value);  var endDate = new Date(document.getElementById("end-date").value);  // 检查开始日期和结束日期是否有效（不是NaN）  var isStartDateValid = !isNaN(startDate.getTime());  var isEndDateValid = !isNaN(endDate.getTime());  // 如果开始日期和结束日期都有效，则进行下一步验证  if (isStartDateValid && isEndDateValid) {  // 检查结束日期是否早于开始日期，如果是，则弹出警告并清空结束日期输入框  if (endDate < startDate) {  alert("结束日期不能早于开始日期");  document.getElementById("end-date").value = "";  } else { // 如果结束日期不早于开始日期，则显示日期范围  document.getElementById("date-range").innerText = "日期范围: " + startDate.toISOString().slice(0, 10) + " - " + endDate.toISOString().slice(0, 10);  }  } else { // 如果开始日期或结束日期无效，则清空显示区域  document.getElementById("date-range").innerText = "";  }  }  // 清除日期范围的函数  function clearDateRange() {  // 清空开始日期和结束日期输入框的值  document.getElementById("start-date").value = "";  document.getElementById("end-date").value = "";  // 清空显示区域的内容  document.getElementById("date-range").innerText = "";  }  </script>  
</body>  
</html>

为了将当前日期转换为农历日期，我们需要使用一个外部库，例如 "lunar-js"。以下是如何使用这个库来实现这个功能：

首先，安装 "lunar-js" 库：

npm install lunar-js

然后，在HTML中引入这个库：

<script src="node_modules/lunar-js/dist/lunar.min.js"></script>

接下来，添加一个新的函数来将当前日期转换为农历日期

<script>  // 引入lunar库  const Lunar = window.Lunar;  // 创建Lunar实例  const lunar = new Lunar();  // 转换当前日期为农历日期的函数  function getLunarDate() {  const currentDate = new Date(); // 获取当前日期  const lunarDate = lunar.convertSolarToLunar(currentDate); // 将当前日期转换为农历日期  return lunarDate; // 返回农历日期  }  
</script>

现在，你可以在HTML中调用这个函数并显示农历日期：

<p id="lunar-date"></p> <!-- 用于显示农历日期的段落 -->  
<script>  document.getElementById("lunar-date").innerText = getLunarDate().getLongYear() + "年" + getLunarDate().getMonth() + "月" + getLunarDate().getDay() + "日"; // 显示农历日期和月份  
</script>

相关文章：

使用JavaScript实现一个复杂功能：日期范围选择器

日期范围选择器是一个常见的Web应用功能&#xff0c;它允许用户选择一个日期范围。在本篇文章中&#xff0c;我们将使用JavaScript来实现这个功能。 一、实现思路 创建一个开始日期输入框和一个结束日期输入框。 添加事件监听器&#xff0c;监听开始日期输入框和结束日期输入…...

编程日记 2024/1/20 11:24:58

[C#]winform部署openvino调用padleocr模型

【官方框架地址】 https://github.com/PaddlePaddle/PaddleOCR 【算法介绍】 OpenVINO和PaddleOCR都是用于计算机视觉应用的工具&#xff0c;但它们有不同的特点和用途。OpenVINO是一个由Intel开发的开源工具套件&#xff0c;主要用于加速深度学习推理&#xff0c;而PaddleOC…...

编程日记 2024/1/20 11:22:56

【docker-compose】【nginx】内网环境https配置

目录 1、openssl生成自签名证书和私钥2、nginx.conf配置ssl3、docker-compose挂载 1、openssl生成自签名证书和私钥 在部署服务器上&#xff0c;新建cert目录&#xff0c;执行以下指令&#xff0c;然后生成.crt和.key文件 openssl req -newkey rsa:2048 -nodes -keyout rsa_pri…...

编程日记 2024/1/20 11:19:54

大语言模型无代码构建知识图谱概述

2023年3月15日&#xff0c;ChatGPT4.0的横空出世&#xff0c;将人们对大语言模型的关注推到了风口浪尖。由于其在智能问答、翻译以及文本生成等工作任务上的卓越表现&#xff0c;业界一度出现了不再需要发展知识图谱相关技术的观点&#xff0c;知识图谱相关概念严重受挫。无可置…...

编程日记 2024/1/20 11:18:53

链表回文结构

链表回文结构 编写一个函数&#xff0c;检查输入的链表是否是回文的。 示例 1&#xff1a; 输入&#xff1a; 1->2 输出&#xff1a; false 示例 2&#xff1a; 输入&#xff1a; 1->2->2->1 输出&#xff1a; true 链表的回文结构&#xff0c;应该先找到中间节…...

编程日记 2024/1/20 11:17:52

MyBatis框架基础到进阶

1、为什么要学习MyBatis 如果没有MyBatis框架&#xff0c;我们依靠JDBC和连接池已经能够很好的和数据库进行交互了&#xff0c;而学习MyBatis框架最核心的原因是为了减少SQL语句对代码的侵入性。 因为在过往不管是使用连接池还是JDBC Templete&#xff0c;所有的SQL语句都写在代…...

编程日记 2024/1/20 11:15:50

【答案】2023年国赛信息安全管理与评估正式赛答案-模块1任务一

1.根据网络拓扑图所示&#xff0c;按照IP 地址规划表&#xff0c;对防火墙的名称、各接口IP 地址进行配置。共8 分&#xff0c;每错1 处&#xff08;行&#xff09;扣1 分&#xff0c;扣完为止。地址、安全域、接口&#xff08;状态为UP&#xff09;、名称都正确。 2.根据网络…...

编程日记 2024/1/20 11:14:50

【REMB 】翻译：草案remb-03

REMB REMB消息 以及 绝对时间戳选项 在带宽估计中的使用 ：an absolute-value timestamp option for use in bandwidth estimatoin. 接收方带宽估计的RTCP消息 REMB 这位大神翻译的更好。 RTCP message for Receiver Estimated Maximum Bitrate draft-alvestrand-rmcat-remb-03…...

编程日记 2024/1/20 11:11:47

力扣（leetcode）第830题较大分组的位置（Python）

830.较大分组的位置 题目链接&#xff1a;830.较大分组的位置 在一个由小写字母构成的字符串 s 中&#xff0c;包含由一些连续的相同字符所构成的分组。 例如&#xff0c;在字符串 s “abbxxxxzyy” 中&#xff0c;就含有 “a”, “bb”, “xxxx”, “z” 和 “yy” 这样的…...

编程日记 2024/1/20 11:09:45

【导航】繁星学习随想录

导航&#xff1a;繁星学习随想录 一、编程启示录 01 数据结构漫谈 序号博文名称/链接01扁扁笨算法-AVL树的插入与删除02扁扁笨算法-B树的插入与删除 02 概念小扫盲 序号博文名称/链接01简单理解决策树_如何理解决策树的生长过程-CSDN博客02白盒测试方法与黑盒测试方法简析…...

编程日记 2024/1/20 11:08:44

Oracle 隐式数据类型转换

目录 Oracle类型转换规则&#xff1a; 看如下实验&#xff1a; 1、创建一张表&#xff0c;字段id的类型为number&#xff0c;id字段创建索引&#xff0c;插入一条测试数据 2、我们做如下查询&#xff0c;id的值设置为字符型的1 3、查看执行计划&#xff1a; Oracle类型转换…...

编程日记 2024/1/20 11:07:43

压缩编码之不同缩放参数对重建图像质量的影响的python实现——JPEG变换编码不同压缩率的模拟

原理 JPEG&#xff08;Joint Photographic Experts Group&#xff09;是一种常用的图像压缩标准&#xff0c;它通过采用离散余弦变换&#xff08;DCT&#xff09;和量化来实现图像的压缩。 离散余弦变换&#xff08;DCT&#xff09;&#xff1a; JPEG首先将图像分割成8x8的块…...

编程日记 2024/1/20 11:05:40

大数据导论（2）---大数据与云计算、物联网、人工智能

文章目录 1. 云计算1.1 云计算概念1.2 云计算的服务模式和类型1.3 云计算的数据中心与应用 2. 物联网2.1 物联网的概念和关键技术2.2 物联网的应用和产业2.3 大数据与云计算、物联网的关系 1. 云计算 1.1 云计算概念 1. 首先从商业角度给云计算下一个定义&#xff1a;通过网络…...

编程日记 2024/1/20 11:01:37

有序矩阵中第 K 小的元素

题目链接 有序矩阵中第 K 小的元素 题目描述 注意点 每行和每列元素均按升序排序找到一个内存复杂度优于 O(n) 的解决方案 解答思路 使用二分查找&#xff0c;思路为&#xff1a; &#xff08;1&#xff09;因为左上角的元素值更小&#xff0c;右下角的元素值更大&#xf…...

编程日记 2024/1/20 11:00:36

Nginx详细介绍（并从技术层面深度剖析）

nginx介绍 1.nginx 介绍2.nginx的优势3.Nginx VS Apache3.1.内核、语言、诞生时间比较3.2.功能比较3.3.Nginx 相对 apache 的优点 4.Nginx为什么有这么多的优势&#xff1f;4.1.IO多路复用&#xff08;I/O multiplexing【多并发】&#xff09;4.2.nginx的驱动模型介绍4.3.nginx…...

编程日记 2024/1/20 10:57:34

单元测试基本概念

单元测试一般是开发来做的&#xff0c;但是因为业务需要也曾涉及过单元测试。目前就单元测试的基础概念做下总结。 一、 单元测试定义&#xff1a; 单元测试是软件开发中的一种测试方法&#xff0c;用于验证程序中的最小可测单元——即代码中的单个函数、方法或模块。单元测试…...

编程日记 2024/1/20 10:56:33

ECTouch 电商微信小程序 SQL注入漏洞复现（CVE-2023-39560）

0x01 产品简介 ECTouch是一款开源的电商系统，为中小企业提供最佳的新零售解决方案 0x02 漏洞概述 ECTouch 电商系统 /ectouch-main/include/apps/default/helpers/insert.php 文件中第285行的 insert_bought_notes 函数中，传入的 $arr[id] 参数未进行验证和过滤，导致未经…...

编程日记 2024/1/20 10:54:31

MCM备赛笔记——熵权法

Key Concept 熵权法是一种基于信息熵概念的权重确定方法&#xff0c;用于多指标决策分析中。信息熵是度量信息量的不确定性或混乱程度的指标&#xff0c;在熵权法中&#xff0c;它用来反映某个指标在评价过程中的分散程度&#xff0c;进而确定该指标的权重。指标的分散程度越高…...

编程日记 2024/1/20 10:53:30

vscode设置terminal的最大行数

今天跑代码出现一个问题&#xff0c;就是整个程序跑完&#xff0c;整个程序的输出信息过多&#xff0c;最开始输出的信息已经被vscode的缓存冲掉了&#xff0c;只能看到最后的一部分&#xff0c;具体的原因是vscode的terminal默认只能保存1000行的信息&#xff0c;所以如果想保…...

编程日记 2024/1/20 10:49:26

kafka hang 问题记录

参考文档 https://cloud.tencent.com/developer/article/1821477 9092端口 端口9092通常与Apache Kafka关联。 Kafka是一个开源的分布式事件流平台&#xff0c;用于构建实时的数据管道和流应用。 它能够处理任意大小的数据&#xff0c;以容错的方式处理数据流。 在默认配置…...

编程日记 2024/1/20 10:48:25

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/9/15 0:18:50

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/9/14 10:33:45

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/7/8 4:43:23

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/9/9 15:02:38

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2025/9/11 12:54:52

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/8/13 21:32:37

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2025/6/21 11:16:25

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/9/1 17:56:35

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

编程新知 2025/9/2 1:07:37

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

编程新知 2025/6/10 21:19:52