input时间控件选择时禁用某个日期之前或之后



  • 【版权所有,文章允许转载,但须以链接方式注明源地址,否则追究法律责任】
  • 【创作不易,点个赞就是对我最大的支持】



前言

仅作为学习笔记,供大家参考
总结的不错的话,记得点赞收藏关注哦!



目录

    • 前言
      • 禁用选择当天之后的日期
        • 效果图
        • 解决方案
      • 用户选择开始时间和结束时间后,禁用某个日期
        • 效果图
        • 解决方案

禁用选择当天之后的日期


用户选择时间时,因没有今天之后的数据,故页面中需要禁用选择当天之后的日期

效果图

在这里插入图片描述




解决方案

html 代码块
<input type="text"class="time-input form-control required"id="endDate"name="endDate"placeholder="截止时间"th:value="${#dates.format(endDate,'yyyy-MM-dd')}"/>






js 代码块

layui.use('laydate', function () {var laydate = layui.laydate;startLayDate = laydate.render({elem: '#endDate',min: $('#endDate').val(),theme: 'molv',type: $('#endDate').attr("data-type") || 'date',trigger: 'click',});});




用户选择开始时间和结束时间后,禁用某个日期



用户选择开始时间和结束时间后,开始时间不得大于结束时间,结束时间不得小于开始时间



效果图

在这里插入图片描述

解决方案

html 代码块
<input id="startTime" name="startTime" class="form-control time-input"style="display: inline;width: 150px;"   type="text"/><input id="endTime" name="endTime" class="form-control time-input" style="display: inline;width: 150px;"type="text"/>






js 代码块

layui.use('laydate', function () {var laydate = layui.laydate;startLayDate = laydate.render({elem: '#startTime',max: $('#endTime').val(),theme: 'molv',type: $('#startTime').attr("data-type") || 'date',trigger: 'click',done: function (value, date) {// 结束时间大于开始时间if (value !== '') {endLayDate.config.min.year = date.year;endLayDate.config.min.month = date.month - 1;endLayDate.config.min.date = date.date;} else {endLayDate.config.min.year = '';endLayDate.config.min.month = '';endLayDate.config.min.date = '';}}});endLayDate = laydate.render({elem: '#endTime',min: $('#startTime').val(),theme: 'molv',type: $('#endTime').attr("data-type") || 'date',trigger: 'click',done: function (value, date) {// 开始时间小于结束时间if (value !== '') {startLayDate.config.max.year = date.year;startLayDate.config.max.month = date.month - 1;startLayDate.config.max.date = date.date;} else {startLayDate.config.max.year = '2099';startLayDate.config.max.month = '12';startLayDate.config.max.date = '31';}}});});





创作不易,点个赞就是对我最大的支持~


公众号:程序员温眉

在这里插入图片描述
CSDN:程序员温眉

每天进步一点点的程序员

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

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

相关文章

微服务09-Sentinel的入门

文章目录 微服务中的雪崩现象解决办法&#xff1a;1. 超时处理2. 舱壁模式3. 熔断降级4.流量控制 Sentinel1.介绍2.使用操作3.限流规则4.实战&#xff1a;流量监控5.高级选项功能的使用1.关联模式2.链路模式3.总结 流控效果1.预热模式2.排队等待模式3.总结4.热点参数限流5.实战…

优秀github项目

记录一些知名的github项目&#xff0c;方便学习。 Goolge https://github.com/google/guavahttps://github.com/google/material-design-iconshttps://github.com/google/daggerhttps://github.com/google/guicehttps://github.com/google/gsonhttps://github.com/google/ExoP…

东芝Z750的画质真实吗?适合看纪录片吗?

东芝Z750显示的画面更加真实、细腻、有层次感,就感觉电视中的画面像真实世界一般呈现在眼前,东芝电视拥有70余年的原色调校技术,每款产品都有专属的日本调校工程师匠心打造,可以真实还原画面色彩,若是观看类似《航拍中国》这样的旅游记录片时,东芝电视将会营造出万里山河的壮阔…

【管理运筹学】第 9 章 | 网络计划(2,时间参数的计算 —— 工作的时间参数)

文章目录 三、工作时间的参数3.1 工作的最早开始时间3.2 工作的最早结束时间3.3 工作的最迟开始时间3.4 工作的最迟结束时间3.5 工作的总时差3.6 工作的单时差3.7 三种时差之间的关系 写在最后 三、工作时间的参数 参数较多&#xff0c;记号也较多&#xff0c;不过如果能借助英…

OpenCV3-Python(7)模板匹配和霍夫检测

模板匹配 膜版匹配不能匹配尺度变换和视角变换的图像 图片中查找和模板相似度最高的图像 计算相似程度最高的位置 res cv.matchTemplate(img , template, method) 该方法返回一个类似灰度图的东西&#xff0c;如果用的相关匹配&#xff0c;那么亮的地方就是可能匹配上的地方 …

Svelte生命周期(加整体概述)

目录 前言 一、编译阶段 1. 导入语句 2. 组件声明 3. 模板部分 4. CSS样式 二、运行时阶段 三、生命周期函数 1. onMount 2. beforeUpdate 与 afterUpdate 3. onDestroy 4. setContext 与 getContext 6. hasContext 7. getAllContexts 前言 Svelte是一种现代的Ja…

装饰器模式和 AOP 面向切片编程(设计模式与开发实践 P15)

文章目录 示例AOP 很多时候我们不希望一个类变得非常庞大&#xff0c;生来就包含很多职责。装饰器模式可以动态地给某个对象添加职责&#xff0c;而不会影响从这个类中派生的其他对象 为什么不用继承解决这个问题呢&#xff1f;如果用继承有可能会创造出数量庞大的子类&#x…

聚观早报 | 首个“5G-A智慧家庭”发布;李鹏称5G-A是5G发展选择

【聚观365】10月12日消息 首个“5G-A智慧家庭”发布 李鹏称5G-A是5G发展的自然选择 新版努比亚Z50S Pro开售 英特尔锐炫A580显卡全球同步上市 vivo X100系列年底登场 首个“5G-A智慧家庭”发布 在全球移动宽带论坛&#xff08;MBBF2023&#xff09;期间&#xff0c;du联合…

这些负载均衡都解决哪些问题?服务、网关、NGINX

这篇文章解答一下群友的一系列提问&#xff1a; 在微服务项目中&#xff0c;有服务的负载均衡、网关的负载均衡、Nginx的负载均衡&#xff0c;这几个负载均衡分别用来解决什么问题呢&#xff1f; 在微服务项目中&#xff0c;服务的负载均衡、网关的负载均衡和Nginx的负载均衡都…

04_学习springdoc与oauth结合_简述

文章目录 1 前言2 基本结构3 需要做的配置 简述4 需要做的配置 详述4.1 backend-api-gateway 的配置4.1.1 application.yml 4.2 backend-film 的配置4.2.1 pom.xml 引入依赖4.2.2 application.yml 的配置4.2.3 Spring Security 资源服务器的配置类 MyResourceServerConfig4.2.4…

uniapp iosApp H5+本地文件操作(写入修改删除等)

h5 地址 html5plus 以csv文件为例&#xff0c;写入读取保存修改删除文件内容&#xff0c;传输文件等 1.save 文件保存 function saveCsv(data,pathP,path){// #ifdef APP-PLUSreturn new Promise((resolve, reject) > {plus.io.requestFileSystem( plus.io.PUBLIC_DOCUMEN…

WIN32API之PIPE管道

管道是进程用于通信的共享内存的一部分。 创建管道的过程是 管道服务器。 连接到管道的进程是 管道客户端。 一个进程将信息写入管道&#xff0c;另一个进程从管道读取信息。 本概述介绍如何创建、管理和使用管道。 命名管道是用于管道服务器与一个或多个管道客户端之间通信的…

vue打印功能

安装 vue3-print-nb yarn add vue3-print-nb //或 npm install vue3-print-nbmain.js中引入 vue3-print-nb import { createApp } from vue; import App from ./App.vue; const app createApp(App); // 打印插件 import print from vue3-print-nb app.use(print) //页面内引…

【Docker 内核详解】namespace 资源隔离(一):进行 namespace API 操作的 4 种方式

namespace 资源隔离&#xff08;一&#xff09;&#xff1a;进行 namespace API 操作的 4 种方式 1.通过 clone() 在创建新进程的同时创建 namespace2.查看 /proc/[pid]/ns 文件3.通过 setns() 加入一个已经存在的 namespace4.通过 unshare() 在原先进程上进行 namespace 隔离5…

Webapck 解决:[webpack-cli] Error: Cannot find module ‘vue-loader/lib/plugin‘ 的问题

1、问题描述&#xff1a; 其一、报错为&#xff1a; [webpack-cli] Error: Cannot find module vue-loader/lib/plugin 中文为&#xff1a; [webpack-cli] 错误&#xff1a;找不到模块“vue-loader/lib/plugin” 其二、问题描述为&#xff1a; 在项目打包的时候 npm run …

c++视觉图像----扩充边界

图像扩充边界 #include <opencv2/opencv.hpp> #include <opencv2/highgui/highgui.hpp>int main() {// 读取图像cv::Mat image cv::imread("1.jpg", cv::IMREAD_COLOR);if (image.empty()) {std::cerr << "Could not open or find the imag…

Java项目调用Python脚本(基于idea)

前期准备 1.首先需要在本地环境中安装配置python环境 Python(含PyCharm及配置)下载安装以及简单使用(Idea) 博主本次使用python版本为py3.7.3 2.idea安装python插件 位置&#xff1a;File->Settings->Plugins->python->安装后重启即可 3.引入jython依赖 &l…

力扣 -- 1312. 让字符串成为回文串的最少插入次数

解题步骤&#xff1a; 参考代码&#xff1a; class Solution { public:int minInsertions(string s) {int ns.size();vector<vector<int>> dp(n,vector<int>(n));//无需初始化//填表for(int in-1;i>0;i--){for(int ji;j<n;j){//状态转移方程if(s[i]s[…

如何在 Spring Boot 中进行数据备份

在Spring Boot中进行数据备份 数据备份是确保数据安全性和可恢复性的关键任务之一。Spring Boot提供了多种方法来执行数据备份&#xff0c;无论是定期备份数据库&#xff0c;还是将数据导出到外部存储。本文将介绍在Spring Boot应用程序中进行数据备份的不同方法。 方法1: 使用…

【深度学习实验】循环神经网络(一):循环神经网络(RNN)模型的实现与梯度裁剪

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 三、实验内容 0. 导入必要的工具包 1. 数据处理 2. rnn 测试 3. grad_clipping 4. 代码整合 经验是智慧之父&#xff0c;记忆是智慧之母。 ——谚语 一、实验介绍 本实验介绍了一个简单的循环神经网络…