jquery.datetimepicker无法添加清除按钮的问题

项目场景:

datetimepicker插件示例自从决定用现有新技术实现CRM老项目起,就开始了我的折腾之路,最近一直在折腾前端页面,不像后端Java,写的有问题运行会报错,大多数报错一搜就能找到解决方案,前端这个倒好,挠破头也找不到原因呀,只能试来试去,一时间我开始怀疑我是在做Java后端项目吗?

开发环境如下:
操作系统:Windows11
Java:jdk-21.0.2
IDE:eclipse 2024-3R
Tomcat:apache-tomcat-10.1.11
Maven:apache-maven-3.9.6
数据库:MariaDB11.0
项目地址:https://gitcode.com/weixin_44803446/crm-project.git


问题描述

在一般的前端界面中,针对日期类的数据,都采用点击选择的形式,在这个项目中,我们采用jquery.datetimepicker插件来实现。

 <!--资源引用此处省略--><input type="text" class="form-control date-picker"	id="create-marketActivityEndDate">
<script>
$(function() {//使用中文模式$.datetimepicker.setLocale('zh');$(".date-picker").datetimepicker({clearBtn: true,lazyInit:true,timepicker : false,format : 'Y-m-d',// 设置日期只能在今日之后minDate : 0,});
</script>

在这里有一个问题,就是虽然用户通过日历选择了日期,但是输入框本质还是一个input标签,所以还是可以修改的,一旦用户在选择时间后,又手动修改了数据,会导致这部分错误格式的日期数据传入后台甚至写入数据库,为了解决这个问题,当然是给input标签加上“readonly”属性;但是这样又有另外一个问题,加入用户误点选择了时间,但实际上又不需要写时间,想清除输入框里面的内容,怎么办?input标签现在是readonly的,用户是无法直接删除。
在阅读了Datetimepicker的官方文档后,并没有在其中找到相关的参数。百度及AI给出的解决方案是说Datetimepicker有一个隐形参数“clearBtn:true”,这个方法确实不错,但是不知道为什么,在我的电脑上并不生效,所以不得不寻找其他的解决方案。


原因分析:

鬼知道是什么原因!


解决方案:

既然不能用插件的清除按钮,那就只好用方案B了。
主要的做法是给每一个“datetimepicker”输入框后面加一个清除内容的按钮,再给每一个按钮绑定事件,因为一个界面有很多日期输入框,也就会对应很多清除按钮,如果用ID选择器绑定click事件会显得很low,而且代码量很大,在经过了各种查阅资料,有了如下我个人感觉不错的解决方案:

<!--资源引用及额外代码此处忽略-->
<div class="input-group-prepend"><span class="input-group-text">结束日期</span> <input id="query_endTime" type="text" class="form-control date-picker" readonly/><div class="input-group-append"><button class="btn btn-sm btn-light" type="button" name="clearDate"><img src="/crm-core/image/icons/arrow-clockwise.svg"></img></button></div>
</div>
<!--这里就是datetimepic的初始化及清除按钮事件的批量绑定-->
<script>// datetimepicker控件设置$(function() {//使用中文模式$.datetimepicker.setLocale('zh');$(".date-picker").datetimepicker({lazyInit:true, //懒加载,当用户点击时再加载timepicker : false, // 禁用时间选择器,因为我们只需要日期format : 'Y-m-d', // 定义格式,根据官方文档及实际需要写// 设置日期只能在今日之后minDate : 0,});// 批量绑定input标签后面的清空按钮$("button[name='clearDate']").click(function(){// .prev()方法只能获得统一级的兄弟标签,故使用.parent()方法到达父级,这个需要根据实际情况来写var relatedInput = $(this).parent().prev(".date-picker");// 清空按钮前面第一个输入框relatedInput.val("");});});
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/25841.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

利用阿里云PAI平台微调ChatGLM3-6B

1.介绍ChatGLM3-6B ChatGLM3-6B大模型是智谱AI和清华大学 KEG 实验室联合发布的对话预训练模型。 1.1 模型规模 模型规模通常用参数数量&#xff08;parameters&#xff09;来衡量。参数数量越多&#xff0c;模型理论上越强大&#xff0c;但也更耗费资源。以下是一些典型模型…

Java入门教程上

常见的cmd命令 类 class 字面量 数据类型 输入 public static void main(String[] args) {Scanner anew Scanner(System.in);int na.nextInt();int ma.nextInt();System.out.println(mn);} } 算数运算符 package wclg;public class test {public static void main(String[] ar…

智慧交通的神经中枢:利用ARMxy进行实时交通流数据采集

气候变化和水资源日益紧张&#xff0c;精准农业成为了提高农业生产效率、节约资源的关键。在这一变革中&#xff0c;ARMxy工业计算机扮演了核心角色&#xff0c;特别是在智能灌溉系统的实施中。 背景介绍&#xff1a; 某大型农场面临着灌溉效率低、水资源浪费严重的问题。传统的…

【代码随想录训练营】【Day 50】【动态规划-9】| Leetcode 198, 213, 337

【代码随想录训练营】【Day 50】【动态规划-9】【需二刷】| Leetcode 198, 213, 337 需强化知识点 需二刷&#xff0c;打家劫舍系列 题目 198. 打家劫舍 class Solution:def rob(self, nums: List[int]) -> int:if len(nums) 1:return nums[0]dp [0] * (len(nums))dp…

讯飞星火大模型个人API账号免费使用申请教程

文章目录 1.登录讯飞星火大模型官网 https://www.xfyun.cn/ 2.下滑找到Spark Lite&#xff0c;点击立即调用 3.星火大模型需要和具体的应用绑定&#xff0c;我们需要先创建一个新应用 https://console.xfyun.cn/app/myapp&#xff0c;应用名称可以按照自己的意愿起。 4.填写应用…

类和对象(上续)

前言&#xff1a;本文介绍类和对象中的一些比较重要的知识点&#xff0c;为以后的继续学习打好基础。 目录 拷贝构造 拷贝构造的特征&#xff1a; 自定义类型的传值传参 自定义类型在函数中的传值返回 如果返回值时自定义的引用呢&#xff1f; 在什么情况下使用呢&#…

Vue3【十五】标签的Ref属性

Vue3【十五】标签的Ref属性 标签的ref属性 用于注册模板引用 用在dom标签上&#xff0c;获取的是dom节点 用在组件上&#xff0c;获取的是组件实例对象 案例截图 目录结构 代码 app.vue <template><div class"app"><h1 ref"title2">你…

对象创建的4种模式

1. 工厂模式 这种模式抽象了创建具体对象的过程&#xff0c;用函数来封装以特定接口创建对象的细节 缺点&#xff1a;没有解决对象识别的问题&#xff08;即怎样知道一个对象的类型&#xff09; function createPerson(name, age, job) {var o new Object();o.name name;o.ag…

MATLAB实现磷虾算法(Krill herd algorithm)

1.算法介绍 磷虾算法&#xff08;Krill Herd Algorithm, KH&#xff09;是一种基于生物启发的优化算法&#xff0c;其原理模拟了南极磷虾&#xff08;Euphausia superba&#xff09;群体的聚集行为。该算法旨在通过模拟磷虾个体间的相互作用、觅食行为和随机扩散&#xff0c;来…

glm-4-9b-chat-1m模型结构解读

glm-4-9b-chat-1m模型结构解读 模型代码文件下载 glm-4-9b-chat-1m模型总体结构 ChatGLMForConditionalGeneration((transformer): ChatGLMModel((embedding): Embedding((word_embeddings): Embedding(151552, 4096))(rotary_pos_emb): RotaryEmbedding()(encoder): GLMTran…

No ‘ChromeSansMM’ font 错误解决

No ‘ChromeSansMM’ font 错误解决 错误 class com.spire.ms.System.Exception: No ChromeSansMM font found! 背景 在使用 Spire.PDF 库处理 PDF 文件时&#xff0c;遇到了以下错误&#xff1a; class com.spire.ms.System.Exception: No ChromeSansMM font found! com.…

L2-002 链表去重(C++)

给定一个带整数键值的链表 L&#xff0c;你需要把其中绝对值重复的键值结点删掉。即对每个键值 K&#xff0c;只有第一个绝对值等于 K 的结点被保留。同时&#xff0c;所有被删除的结点须被保存在另一个链表上。例如给定 L 为 21→-15→-15→-7→15&#xff0c;你需要输出去重后…

【数据结构与算法 | 堆篇】力扣295

1. 力扣295 (1). 题 中位数是有序整数列表中的中间值。如果列表的大小是偶数&#xff0c;则没有中间值&#xff0c;中位数是两个中间值的平均值。 例如 arr [2,3,4] 的中位数是 3 。例如 arr [2,3] 的中位数是 (2 3) / 2 2.5 。 实现 MedianFinder 类: MedianFinder() …

10进制与二、八、十六进制的转换

x进制转10进制 1、如八进制数123&#xff0c;通过把每一位数字和8的指数级进行相乘 1 * 8^2 2 * 8^1 3 * 8^01 * 64 2 * 8 3 * 164 16 383 2、十六进制1A3 1 * 16^2 A(即10) * 16^1 3 * 16^01 * 256 10 * 16 3 * 1256 160 3419 3、二进制1010 1 * 2^3 0 * 2…

基于机器学习的锂电池RUL SOH预测

数据集为NASA锂电池数据集。 import datetimeimport numpy as npimport pandas as pdfrom scipy.io import loadmatfrom sklearn.preprocessing import MinMaxScalerfrom sklearn.metrics import mean_squared_errorfrom sklearn import metricsimport matplotlib.pyplot as p…

C# MES通信从入门到精通(11)——C#如何使用Json字符串

前言 我们在开发上位机软件的过程中&#xff0c;经常需要和Mes系统进行数据交互&#xff0c;并且最常用的数据格式是Json&#xff0c;本文就是详细介绍Json格式的类型&#xff0c;以及我们在与mes系统进行交互时如何组织Json数据。 1、在C#中如何调用Json 在C#中调用Json相关…

【Golang】Go语言中defer与return的精妙交织:探索延迟执行与返回顺序的微妙关系

【Golang】Go语言中defer与return的精妙交织&#xff1a;探索延迟执行与返回顺序的微妙关系 大家好 我是寸铁&#x1f44a; 总结了一篇defer 和 return 返回值 的执行顺序探讨的文章✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 前言 在Go语言中&#xff0c;defer 和return是两…

二进制文件的膨胀策略和使用 debloat 消除膨胀测试

在恶意软件的分析中有的 Windows 可执行文件&#xff08;PE 文件&#xff09;会通过膨胀策略来绕过防病毒一些防病毒的检查&#xff0c;比如上传云进行分析&#xff0c;因为文件太大了所以无法进行一些防病毒分析。一般的可执行文件有很多的膨胀策略&#xff0c;一般简单的膨胀…

ovs网络配置命令

ovs 查看 OVS 版本查看当前配置的所有交换机查看交换机的详细信息创建和删除桥接添加和删除端口配置端口 Open vSwitch是一种生产质量的多层虚拟交换机&#xff0c;根据开源Apache 2.0许可证进行许可。它旨在通过编程扩展实现大规模网络自动化&#xff0c;同时仍然支持标准管理…

NettyのBufferChannelSelector用法

这一篇介绍Buffer&Channel&Selector的常见API使用案例 1、Buffer 1.1、从Buffe中读取/写入 以ByteBuffer为例。Buffer需要和Channel结合使用&#xff08;在上一篇中提到&#xff0c;通道是数据传输的载体&#xff0c;缓冲区是数据的临时存储区&#xff09;。 那么如何…