前端日期组件layui使用,月模式

初学前端,实战总结

概要

有一个日期组件,我的谷歌浏览器选完日期后,偶尔获取不到最新数据,有一个客户,是经常出不来数据。

日期组件是Wdate:调用的方法是WdatePicker onpicking,代码片段如下:

  <input type="text" name="repairDate"value="${assess.REPAIR_DATE}"onFocus="WdatePicker({onpicking:loadDefaultNum,dateFmt : 'yyyy-MM',lang:'zh-cn'})"id="repairDate" class="input-text Wdate w100" autocomplete="off">

最终解决方案

更换日期组件,换为layui
引入代码如下:

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/common/static/layui/css/layui.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/common/static/layui/layui.js" ></script>var self=this;
//执行一个laydate实例
layui.use('laydate', function() {laydate = layui.laydate;var month = new Date().getMonth() + 1;month = (month < 10 ? "0" + month : month);laydate.render({elem: '#repairDate',trigger: "click",format: 'yyyy-MM',type: 'month',//, show: true //直接显示value: new Date().getFullYear() + "-" + month,btns: ['now', 'confirm'],done: function (value, date, endDate) {//日期时间被切换后的回调//$('#datatime').change();// self.date = value;// self.dateText = self.dateFormed(value)self.loadDefaultNum();console.log(value); //得到日期生成的值,如:2017-08-18console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。}});
});

效果图

` 最终的效果还不错

在这里插入图片描述

我踩过的坑

**` 踩坑1:**程序报错找不到 layui,
原因:我为了新的样式可以覆盖旧的样式,把css 和js 样式放到了最后,放到了我写layui.use(‘laydate’, function() 这段script 的后面。
放到后面,会导致找不到资源。
所以,我放到了这段script 之前。
踩坑2: 因为好久做script的开发,我引入script遇到了报错,我是缺少了type=“text/javascript” 这部分说明

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/common/static/layui/css/layui.css"/><script type="text/javascript" src="<%=request.getContextPath()%>/common/static/layui/layui.js" ></script>

踩坑3: 在head 部分,script 不写闭合标签会报错。
错误代码是这样的

<script type="text/javascript" src="<%=request.getContextPath()%>/common/static/layui/layui.js" />

小结

script 和css 引入,需要放到代码片段之前。
加油,我会越来越棒的!成为真正的前端。

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

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

相关文章

基于AT89C51单片机的智能交通灯设计

点击链接获取Keil源码与Project Backups仿真图&#xff1a; https://download.csdn.net/download/qq_64505944/89035863?spm1001.2014.3001.5503 1绪 论 1.1课题研究背景 交通是城市经济活动的命脉&#xff0c;对城市经济发展、人民生活水平的提高起着十分重要的作用。城市交…

302.【华为OD机试】叠积木(贪心算法—JavaPythonC++JS实现)

本文收录于专栏:算法之翼 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目-叠积木二.解题思路三.题解代码Python题解代码JAVA题解代码C/C++题解代码JS题解代码四.代码…

干货分享DS5L1伺服电机通过倍讯科技485转 Profinet 网关与西门子PLC进行通信的配置方法

倍讯科技485转 ProfinetDS5L1 伺服电机与 Profinet 网关进行通信需要了解 Profinet 协议和伺服电机的具体通信要求。以下是您可以如何解决此问题的总体概述&#xff1a; 了解 Profinet&#xff1a;Profinet 是自动化工业以太网标准。您需要了解 Profinet 的工作原理、其寻址方案…

纳斯达克大屏:媒体尺寸及投放费用详解

纳斯达克大屏媒体尺寸及投放费用详解 纳斯达克图片要求 像素 纳斯达克大屏媒体图片的像素要求为2336 H x 1832 W (pixels)。确保你的图片符合这一尺寸要求&#xff0c;以确保在大屏上的显示效果最佳。 分辨率 分辨率要求为(1.0) px 72 dpi。这意味着每个像素显示为一个实…

Java 加载外部 Jar 中的类并通过反射调用类中的方法

目录 问题 类加载器 获取外部 jar 包中的类以及方法 调用外部 jar 包中的方法 问题 工作中遇到一个需求&#xff0c;客户端将第三方的 jar 包上传到服务器中&#xff0c;系统需要解析出上传的 jar 中所有类以及类下的方法&#xff08;方法名&#xff0c;方法输入参数类型&…

Spire.PDF for .NET【文档操作】演示:查找并删除 PDF 中的空白页

PDF 中的空白页并不罕见&#xff0c;因为它们可能是作者故意留下的或在操作文档时意外添加的。当您阅读或打印文档时&#xff0c;这些空白页可能会很烦人&#xff0c;因此可能非常有必要将其删除。在本文中&#xff0c;您将了解如何使用Spire.PDF for .NET以编程方式查找和删除…

亲测有效Djiango连接oracle

navicat连接本地oracle截图。 Djiango下面settings.py下面的DATABASES&#xff1a; 注意&#xff1a;USER最好不要用sys或者system可能会导致连接不了&#xff0c;最好是自己新建的oracle用户。

Aapche Nutch建立自己的搜索引擎

sudo apt install default-jdk‘ java -version openjdk version "11.0.22" 2024-01-16 vi .bashrc export JAVA_HOME/usr/lib/jvm/java-11-openjdk-amd64 爬梯子下载源代码 Apache Nutch™ – Downloads mkdir -p urls cd urls touch seed.txt 里面放入我的网站…

Redis是单线程还是多线程

之前面试又被问到这个问题&#xff0c;一直以为Redis是单线程&#xff0c;直到面试官的指点&#xff0c;才发现这么说有误&#xff0c;于是查了很多资料&#xff0c;下面简单聊聊Redis是单线程还是多线程&#xff1f; 单线程数据操作 首先需要理清一个基本概念&#xff1a;所…

【C++11】thread线程库

【C11】thread线程库 目录 【C11】thread线程库thread类的简单介绍函数指针lambda表达式常用在线程中 线程函数参数join与detach利用RAII思想来自动回收线程 原子性操作库(atomic)atomic中的load函数&#xff1a;atomic中对变量进行原子操作的一些函数 CAS(Compare-And-Swap)无…

VGG16神经网络搭建

一、定义提取特征网络结构 将要实现的神经网络参数存放在列表中&#xff0c;方便使用。 数字代表卷积核的个数&#xff0c;字符代表池化层的结构 cfgs {"vgg11": [64, M, 128, M, 256, 256, M, 512, 512, M, 512, 512, M],VGG13: [64, 64, M, 128, 128, M, 256, …

「11」显示器采集:捕获单个显示器的完整视频画面

「11」显示器采集捕获单个显示器的完整视频画面 在OBS软件中&#xff0c;「显示器采集」是一种用于捕集显示器屏幕画面的功能&#xff0c;您可以将其用于整个桌面窗口的采集到直播间。该功能主要用于捕捉您的计算机桌面屏幕内容&#xff0c;以便将其实时显示在直播窗口中&#…

MySQL Explain 字段详解

Explain 工具介绍 Explain 一般被称为解释器&#xff0c;通过 Explain 工具&#xff0c;我们能分析我们使用的查询语句或是结构的性能瓶颈&#xff0c;它提供 MySQL 如何执行语句的信息。 使用语法&#xff1a; explain [extended|partition] select在 select 关键字前加 ex…

第 1 章.提示词:开启AI智慧之门的钥匙

什么是提示词&#xff1f; 提示词&#xff0c;是引导语言模型的指令&#xff0c;让用户能够驾驭模型的输出&#xff0c;确保生成的文本符合需求。 ChatGPT&#xff0c;这位文字界的艺术大师&#xff0c;以transformer架构为基石&#xff0c;能轻松驾驭海量数据&#xff0c;编织…

R 生存分析3:Cox等比例风险回归及等比例风险检验

虽然Kaplan-Meier分析方法目前应用很广&#xff0c;但是该方法存在一下局限: 对于一些连续型变量&#xff0c;必须分类下可以进行生存率对比 是一种单变量分析&#xff0c;无法同时对多组变量进行分析 是一种非参数分析方法&#xff0c;必须有患者个体数据才能进行分析 英国…

Java冒泡排序详细讲解

冒泡排序是一种简单但效率较低的排序算法&#xff0c;它重复地走访过要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果它们的顺序错误就把它们交换过来。具体实现如下&#xff1a; 算法步骤&#xff1a; 比较相邻的元素&#xff1a;从第一个元素开始&#xff0c;依次…

阳光倒灌高准直汽车抬头显示器HUD太阳光模拟器

阳光倒灌高准直汽车抬头显示器HUD太阳光模拟器是一种高级别的模拟设备&#xff0c;用于模拟太阳光的光谱、强度及照射角度&#xff0c;应用于太阳能电池板、光伏系统等领域的研究和测试。其参数包括光谱范围、光强度、光源、照射角度、均匀性和稳定性&#xff0c;可根据需求调整…

ubuntu20.04安装截图工具flameshot

ubuntu20.04 自带的截图工具&#xff0c;可以使用快捷键“shift printScreen” ,但是它不能对截图进行编辑。 现在安装截图工具 flameshot&#xff0c;使用以下命令&#xff1a; sudo apt install flameshot 安装完成后&#xff0c;使用以下命令打开&#xff1a; flamesho…

Linux应用实战之网络服务器(一) HTTP协议介绍

0、前言 准备做一个Linux网络服务器应用实战&#xff0c;通过网页和运行在Linux下的服务器程序通信&#xff0c;这是第一篇&#xff0c;先简单介绍一下HTTP协议。 1、概述 1.1 定义 HTTP&#xff08;Hypertext Transfer Protocol&#xff09;是一种用于传输超文本数据的应用…

MySQL 命令 alter table 修改字段

新增字段 项目开发过程中以及项目迭代后&#xff0c;都会涉及到需要新增字段的场景。大多数人应该是使用数据库管理工具&#xff08;如&#xff1a;Navicat&#xff09;操作的&#xff0c;但是使用新增字段的命令进行操作也理应会使用&#xff0c;在特定场景下只能使用命令新增…