永济市做网站,2021年搜索引擎排名,化妆品网站建设实训总结,最新资讯热点项目场景#xff1a;
自从决定用现有新技术实现CRM老项目起#xff0c;就开始了我的折腾之路#xff0c;最近一直在折腾前端页面#xff0c;不像后端Java#xff0c;写的有问题运行会报错#xff0c;大多数报错一搜就能找到解决方案#xff0c;前端这个倒好#xff0c…项目场景
自从决定用现有新技术实现CRM老项目起就开始了我的折腾之路最近一直在折腾前端页面不像后端Java写的有问题运行会报错大多数报错一搜就能找到解决方案前端这个倒好挠破头也找不到原因呀只能试来试去一时间我开始怀疑我是在做Java后端项目吗
开发环境如下 操作系统Windows11 Javajdk-21.0.2 IDEeclipse 2024-3R Tomcatapache-tomcat-10.1.11 Mavenapache-maven-3.9.6 数据库MariaDB11.0 项目地址https://gitcode.com/weixin_44803446/crm-project.git 问题描述
在一般的前端界面中针对日期类的数据都采用点击选择的形式在这个项目中我们采用jquery.datetimepicker插件来实现。 !--资源引用此处省略--input typetext classform-control date-picker idcreate-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 classinput-group-prependspan classinput-group-text结束日期/span input idquery_endTime typetext classform-control date-picker readonly/div classinput-group-appendbutton classbtn btn-sm btn-light typebutton nameclearDateimg 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[nameclearDate]).click(function(){// .prev()方法只能获得统一级的兄弟标签故使用.parent()方法到达父级这个需要根据实际情况来写var relatedInput $(this).parent().prev(.date-picker);// 清空按钮前面第一个输入框relatedInput.val();});});
/script
