前端日期组件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;对城市经济发展、人民生活水平的提高起着十分重要的作用。城市交…

干货分享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。这意味着每个像素显示为一个实…

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用户。

【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;必须有患者个体数据才能进行分析 英国…

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

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

ubuntu20.04安装截图工具flameshot

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

Go 语言基础语法

目录 行分隔符 注释 标识符 字符串连接 关键字 Go 语言的空格 格式化字符串 Printf 实例 Go 语言变量 变量声明 多变量声明 值类型和引用类型 简短形式&#xff0c;使用 : 赋值操作符 Go 程序可以由多个标记组成&#xff0c;可以是关键字&#xff0c;标识符&#…

C++ 之LeetCode刷题记录(四十)

&#x1f604;&#x1f60a;&#x1f606;&#x1f603;&#x1f604;&#x1f60a;&#x1f606;&#x1f603; 开始cpp刷题之旅。 目标&#xff1a;执行用时击败90%以上使用 C 的用户。 27. 移除元素 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值…

文献速递:文献速递:基于SAM的医学图像分割--SAM-Med3D

Title 题目 SAM-Med3D 01 文献速递介绍 医学图像分析已成为现代医疗保健不可或缺的基石&#xff0c;辅助诊断、治疗计划和进一步的医学研究]。在这一领域中最重要的挑战之一是精确分割体积医学图像。尽管众多方法在一系列目标上展现了值得称赞的有效性&#xff0c;但现有的…

jmeter二次开发发送java请求_保姆级教程!!!

一、引言 JMeter是Apache基金会开发的一款开源性能测试工具&#xff0c;广泛应用于软件性能测试领域。它能够模拟多线程并发用户对应用程序进行压力测试&#xff0c;以评估应用程序的性能和稳定性。然而&#xff0c;在实际使用过程中&#xff0c;用户可能会遇到需要发送Java请…

RHCE实验-建立NFS服务器,使的客户端顺序共享数据

第一步&#xff1a;服务端及客户端的准备工作 # 恢复快照[rootserver ~]# setenforce 0​[rootserver ~]# systemctl stop firewalld​[rootserver ~]# yum install nfs-utils -y # 服务端及客户端都安装 第二步&#xff1a;服务端建立共享文件目录&#xff0c;并设置权限…

Vue3 新项目默认工程文件理解

Vue3 新项目默认工程文件理解 文章目录 Vue3 新项目默认工程文件理解0、工程文件结构图1、main.ts2、index.html源文件编译后 3、App.vue4、.d.ts 文件作用 0、工程文件结构图 1、main.ts // 引入 createApp 函数 import { createApp } from vue // 引入 style.css 文件&#…

【QT+QGIS跨平台编译】之九十五:【QGIS_App跨平台编译】—【错误处理:找不到标识符QwtPolarPoint】

文章目录 一、找不到标识符QwtPolarPoint二、原因分析三、错误处理一、找不到标识符QwtPolarPoint 报错信息如下: 二、原因分析 未找到QWT_POLAR_VERSION 从而执行的函数: mypMarker->setPosition( QwtPolarPoint( currentInfo.azimuth, currentInfo.elevation )