layui laydate日期初始化的一些坑

news/2024/6/24 9:21:02/文章来源:https://blog.csdn.net/csdn565973850/article/details/137145556

layui laydate日期初始化的一些坑

  • 背景
  • 坑一:利用class属性初始化时间控件失败
  • 坑二:后加载页面时间控件初始化失败
  • 坑三:结束时间需要默认追加23:59:59

背景

在日常开发中,总是会不可避免的用到日期插件,不同的日期插件功能上大同小异,UI上也是各有各的特点,个人项目中用的比较的多的时间插件是bootstrap-datetimepicker 插件,日期的UI样式是这样的
在这里插入图片描述
有时候觉得bootstrap-datetimepicker的UI有点看厌了,就会换一下layui 的 laydate 来感受一下,laydate的UI样式是这样的
在这里插入图片描述
今天讲述的问题就是在使用layui laydate时间插件的过程中遇到的一些问题。

坑一:利用class属性初始化时间控件失败

在开发中遇到这样一种情况,页面有多个时间控件,如果每个时间控件都通过元素id去初始化的话,需要写多次,太费劲了,想通过class属性来控制,但是只有第一个生效,效果如下
在这里插入图片描述
页面代码

<div><div class="form-group"><label class="col-sm-3 control-label">时间段:</label><div class="col-sm-3"><input type="text" class="form-control filter-time" name="startTime" id="startTime" placeholder="开始时间"></div><div style="padding-top: 5px;float: left;">--</div><div class="col-sm-3"><input type="text" class="form-control filter-time" name="endTime" id="endTime" placeholder="结束时间"></div></div><div class="form-group"><label class="col-sm-3 control-label">时间段:</label><div class="col-sm-3"><input type="text" class="form-control filter-time" name="startTime1" id="startTime1" placeholder="开始时间"></div><div style="padding-top: 5px;float: left;">--</div><div class="col-sm-3"><input type="text" class="form-control filter-time" name="endTime1" id="endTime1" placeholder="结束时间"></div></div></div>

页面js代码

var laydate;$(function(){layui.use('laydate', function() {laydate = layui.laydate;laydate.render({elem : '.filter-time',type: 'datetime',trigger : 'click'});})})

通过视频可以看到,通过class属性方式给laydate时间插件初始化elem 的方式只有第一个文本框生效,后面的都不生效,那么此时的解决办法就是遍历给相同class属性的文本框初始化日期插件,更改后的js代码

var laydate;$(function(){layui.use('laydate', function() {laydate = layui.laydate;$('.filter-time').each(function() {laydate.render({elem : this,type: 'datetime',trigger : 'click'});});})})

此时再查看页面效果
在这里插入图片描述

坑二:后加载页面时间控件初始化失败

这时有这样一个需求,就是点击动图中的添加按钮,需要在现有时间控件的下方追加时间控件以及其他参数,追加后的页面如图
在这里插入图片描述
此时追加的元素中时间控件并没有初始化,效果如图
在这里插入图片描述
页面代码如下

<div><div class="form-group"><label class="col-sm-3 control-label">时间段:</label><div class="col-sm-3"><input type="text" class="form-control filter-time" name="startTime" id="startTime" placeholder="开始时间"></div><div style="padding-top: 5px;float: left;">--</div><div class="col-sm-3"><input type="text" class="form-control filter-time" name="endTime" id="endTime" placeholder="结束时间"></div></div><div class="form-group"><label class="col-sm-3 control-label">时间段:</label><div class="col-sm-3"><input type="text" class="form-control filter-time" name="startTime1" id="startTime1" placeholder="开始时间"></div><div style="padding-top: 5px;float: left;">--</div><div class="col-sm-3"><input type="text" class="form-control filter-time" name="endTime1" id="endTime1" placeholder="结束时间"></div></div></div>
<div id="container" ></div>

js代码如下

var clicknum = 0;
//点击添加按钮
function addWeight() {var html = '<div class="weightdetail" id="weightdetail'+clicknum+'">';html += '<div class="form-group"><label class="col-sm-3 control-label">时间段:</label><div class="col-sm-3"><input type="text" class="form-control filter-time" name="startTime" placeholder="开始时间" /></div><div style="padding-top: 5px;float: left;">--</div><div class="col-sm-3"><input type="text" class="form-control filter-time" name="endTime" placeholder="结束时间" /></div><div><button type="button" class="btn btn-danger" onclick="removeweight('+clicknum+',null);">删除</button></div></div>';html += '<div class="form-group"><label class="col-sm-3 control-label is-required">转入权重:</label><div class="col-sm-8"><input name="inWeight"  class="form-control" type="text" placeholder="非零开头的最多带两位小数的数字" ></div></div>';html += '<div class="form-group"><label class="col-sm-3 control-label is-required">转出权重:</label><div class="col-sm-8"><input name="outWeight"  class="form-control" type="text" placeholder="非零开头的最多带两位小数的数字" ></div></div>';html += '<div><hr></div></div>';$("#container").append(html);clicknum ++;
}

分析原因的话,应该是在打开当前页面是,class属性包含filter-time的元素已经初始化过了,而后面点击添加按钮新追加的页面内容中的时间控件并没有初始化,这时就需要在新追加页面元素结束之后再对时间控件进行一次初始化。修改后的页面js代码如下

var clicknum = [[${count}]];
//点击添加按钮
function addWeight() {var html = '<div class="weightdetail" id="weightdetail'+clicknum+'">';html += '<div class="form-group"><label class="col-sm-3 control-label">时间段:</label><div class="col-sm-3"><input type="text" class="form-control filter-time" name="startTime" placeholder="开始时间" /></div><div style="padding-top: 5px;float: left;">--</div><div class="col-sm-3"><input type="text" class="form-control filter-time" name="endTime" placeholder="结束时间" /></div><div><button type="button" class="btn btn-danger" onclick="removeweight('+clicknum+',null);">删除</button></div></div>';html += '<div class="form-group"><label class="col-sm-3 control-label is-required">转入权重:</label><div class="col-sm-8"><input name="inWeight"  class="form-control" type="text" placeholder="非零开头的最多带两位小数的数字" ></div></div>';html += '<div class="form-group"><label class="col-sm-3 control-label is-required">转出权重:</label><div class="col-sm-8"><input name="outWeight"  class="form-control" type="text" placeholder="非零开头的最多带两位小数的数字" ></div></div>';html += '<div><hr></div></div>';$("#container").append(html);$('.filter-time').each(function() {laydate.render({elem : this,type: 'datetime',trigger : 'click'});});clicknum ++;
}

这样修改后就可以对后追加的页面时间控件进行初始化,修改后页面效果如图
在这里插入图片描述

坑三:结束时间需要默认追加23:59:59

其实第三个情况不算是坑,而是在使用过程中为了提高工作效率会用到的情况,就是说对于结束时间需要默认匹配 23:59:59,而如果没有指定默认时间的话,默认的时分秒是 00:00:00,比如这样
在这里插入图片描述
那么这个时候如果想给通过添加按钮追加的页面内容的结束时间补充默认时分秒为23:59:59,又该如何修改呢,这里我首先修改结束时间的class属性为filter-time2,同时为js增加默认匹配23:59:59的js补充代码,修改后的js代码如下

//点击添加按钮
function addWeight() {var html = '<div class="weightdetail" id="weightdetail'+clicknum+'">';html += '<div class="form-group"><label class="col-sm-3 control-label">时间段:</label><div class="col-sm-3"><input type="text" class="form-control filter-time" name="startTime" placeholder="开始时间" /></div><div style="padding-top: 5px;float: left;">--</div><div class="col-sm-3"><input type="text" class="form-control filter-time2" name="endTime" placeholder="结束时间" /></div><div><button type="button" class="btn btn-danger" onclick="removeweight('+clicknum+',null);">删除</button></div></div>';html += '<div class="form-group"><label class="col-sm-3 control-label is-required">转入权重:</label><div class="col-sm-8"><input name="inWeight"  class="form-control" type="text" placeholder="非零开头的最多带两位小数的数字" ></div></div>';html += '<div class="form-group"><label class="col-sm-3 control-label is-required">转出权重:</label><div class="col-sm-8"><input name="outWeight"  class="form-control" type="text" placeholder="非零开头的最多带两位小数的数字" ></div></div>';html += '<div><hr></div></div>';$("#container").append(html);$('.filter-time').each(function() {laydate.render({elem : this,type: 'datetime',trigger : 'click'});});$('.filter-time2').each(function() {laydate.render({elem : this,type: 'datetime',trigger : 'click',done:function(value) {if (value) {var split = value.split(" ");if (split[1] == "00:00:00") {this.dateTime.hours = 23;this.dateTime.minutes = 59;this.dateTime.seconds = 59;}}}});});clicknum ++;
}

增加的代码部分如图所示
在这里插入图片描述
最后实现的效果如图
在这里插入图片描述
到这里关于本次在使用layui laydate过程中遇到的问题都全部处理完了,记录在这里以备后续查阅。

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

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

相关文章

golang和Java的简单介绍和对比

一、golang 1、Golang简介 Golang&#xff0c;也称为Go&#xff0c;是由Google公司在2009年推出的开源编程语言&#xff0c;由罗伯特格瑞史莫(Rob Pike)、肯汤普逊(Ken Thompson)、罗勃派克(Robert Griesemer)等人设计。Go语言的目标是在保持简单高效的编程模型的同时&#xf…

C# 多线程

文章目录 C# 多线程进程与线程无参数的子线程带参数的子线程运行结果 销毁线程 Abort()运行结果 ThreadPool和Task运行结果 异步与同步运行结果 lock单线程运行结果 多线程运行结果 使用lock运行结果 C# 多线程 进程与线程 进程&#xff1a;进程就是一个应用程序&#xff0c;…

计算机网络⑦ —— 网络层协议

1. ARP协议 在传输⼀个 IP 数据报的时候&#xff0c;确定了源 IP 地址和⽬标 IP 地址后&#xff0c;就会通过主机路由表确定 IP 数据包下⼀跳。然⽽&#xff0c;⽹络层的下⼀层是数据链路层&#xff0c;所以我们还要知道下⼀跳的 MAC 地址。由于主机的路由表中可以找到下⼀跳的…

数据结构:单调栈和单调队列

文章目录 一、单调栈1.1、栈的思想1.2、单调栈1.2.1、单调栈的基本应用&#xff1a;找出数组中每个元素右侧第一个更大的元素1.2.2、单调栈的基本应用&#xff1a;找出数组中每个元素左侧第一个更大的元素1.2.3、单调栈拓展1.2.4、单调栈LeetCode题单 二、单调队列2.1、队列的思…

使用 golang 以及 Gin 框架,将上传的图片在不保存至本地的情况下添加水印,并上传至阿里云 OSS

正如标题所述&#xff0c;使用golang对上传图片添加水印&#xff0c;以及将图片上传到阿里云OSS&#xff0c;网上一搜索&#xff0c;便有你想要的结果了&#xff0c;可是&#xff0c;他们却先将上传图片添加水印后保存在本地&#xff0c;而后再将添加了水印的图片上传到阿里云O…

火鸟门户系统—房产门户板块

房产门户简介 房产门户是提供房产信息和服务的网站或应用程序。房产门户通常提供以下功能&#xff1a; 房产搜索&#xff1a;用户可以根据位置、价格、房型等条件搜索房产信息。房产发布&#xff1a;用户可以发布出售或出租的房产信息。经纪人查询&#xff1a;用户可以查询附…

“两化”融合试点名单汇总数据(2014至2018年)

01、数据简介 两化融合是指信息化和工业化的高层次的深度结合&#xff0c;其核心在于信息化支撑&#xff0c;追求可持续发展模式。 “两化”融合贯标试点只针对制造业企业&#xff0c;解释变量“两化”融合贯标试点数据来自工业和信息化部办公厅公布的试点名单以及“两化融合…

动态规划训练1

一、leetcode 91解码方法 1、题目解析 这道题就是需要我们对一个数组进行解码&#xff0c;返回有多少种方法就行了。 但是有几个特殊情况&#xff1a;06 不可以为一组、60 也不可以、6 、0也不行 2、算法原理 a状态表示 根据经验题目要求确定表示方程 以i位置为结尾&…

雷军之夜:小米汽车SU7发布会后的智能化探索与网络安全考量

引言 3月28日晚&#xff0c;小米集团创始人雷军在一场备受瞩目的发布会上&#xff0c;以其一贯的激情与诚意&#xff0c;揭开了小米汽车首款车型SU7的神秘面纱。这一夜&#xff0c;不仅是小米跨足汽车行业的重要里程碑&#xff0c;更是中国智能汽车产业向前迈进的新篇章。然而…

【隐私计算实训营008——SCQL】

1.SCQL使用/集成最佳实践 目前SCQL只开放API供用户使用/集成 使用SCDBClient上手体验可以基于SCQL API开发封装白屏产品&#xff0c;或集成到业务链路中 1.1 部署系统 环境配置&#xff1a; 机器配置&#xff1a;CPU/MEM最低8C16G机构之间的网络互通 镜像&#xff1a;secret…

Golang生成UUID

安装依赖 go get -u github.com/google/uuid文档 谷歌UUID文档 示例 函数签名func NewV7() ( UUID ,错误) func (receiver *basicUtils) GenerateUUID() uuid.UUID {return uuid.Must(uuid.NewV7()) } uid : GenerateUUID()

docker部署实用的运维开发手册

下载镜像 docker pull registry.cn-beijing.aliyuncs.com/wuxingge123/reference:latestdocker-compose部署 vim docker-compose.yml version: 3 services:reference:container_name: referenceimage: registry.cn-beijing.aliyuncs.com/wuxingge123/reference:latestports:…

【日常记录】【CSS】css文字渐变擦除

文章目录 1、代码2、自定义css属性 1、代码 主要思路是&#xff1a; 1、弄一个一样的&#xff0c;覆盖到上面去 2、然后改一下文字颜色&#xff0c;改成透明&#xff0c;背景颜色改成 渐变&#xff0c;可以从透明到一个实色&#xff0c;这样就能显示出来下面的文字 3、只有 行内…

百度网站收录提交入口

百度网站收录提交入口 在网站刚建立或者更新内容后&#xff0c;及时将网站提交给搜索引擎是提高网站曝光和获取流量的重要步骤之一。百度作为中国最大的搜索引擎之一&#xff0c;网站在百度中的收录情况尤为重要。下面介绍一下如何通过百度的网站收录提交入口提交网站。 1. 百…

C#手术麻醉系统源码 大型医院手麻系统4大需求是什么?

C#手术麻醉系统源码 大型医院手麻系统4大需求是什么&#xff1f; 手术麻醉临床信息系统有着完善的临床业务功能&#xff0c;能够涵盖整个围术期的工作&#xff0c;能够采集、汇总、存储、处理、展 现所有的临床诊疗资料。通过该系统的实施&#xff0c;能够规范手麻科的工作流程…

PTA L2-045 堆宝塔

堆宝塔游戏是让小朋友根据抓到的彩虹圈的直径大小&#xff0c;按照从大到小的顺序堆起宝塔。但彩虹圈不一定是按照直径的大小顺序抓到的。聪明宝宝采取的策略如下&#xff1a; 首先准备两根柱子&#xff0c;一根 A 柱串宝塔&#xff0c;一根 B 柱用于临时叠放。把第 1 块彩虹圈…

MATLAB科研绘图与学术图表绘制从入门到精通

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】&#x1f91f; 一站式轻松构建小程序、Web网站、移动应用&#xff1a;&#x1f449;注册地址&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交…

Mybatis plue(二) 核心功能

核心功能 P5 条件构造器 mybatisplus支持各种复杂的where条件&#xff0c;可以满足日常开发的所有需求 wrapper就是条件构造器,wrapper就是顶层的&#xff0c; 示例&#xff1a; 查询出名字带0&#xff0c;存款大于等于1000的人的id,username,info,balance字段 Testvoid te…

Oracle Cloud公布 | 每小时 126 亿次 SQL 数据库查询

广而告之&#xff1a;2024 年数据技术嘉年华大会将于 4 月12-13 日在北京召开&#xff0c;春暖花开之际&#xff0c;数据库行业蓬勃发展之时&#xff0c;广邀天下豪杰&#xff0c;相聚北京&#xff0c;共论数据库技术发展的创新与未来。 注册&#xff1a;https://www.modb.pro/…

Adaboost集成学习 | Matlab实现基于GRU-Adaboost门控循环单元结合Adaboost集成学习时间序列预测(股票价格预测)

目录 效果一览基本介绍模型设计程序设计参考资料效果一览 基本介绍 Adaboost集成学习 | Matlab实现基于GRU-Adaboost门控循环单元结合Adaboost集成学习时间序列预测(股票价格预测) 模型设计 股票价格预测是一个具有挑战性的时间序列预测问题,可以使用深度学习模型如门控循环…