elementUI 的el-date-picker日期,开始时间不能大于结束时间

news2024/11/15 2:01:20

需求描述:form表单里有开始日期和结束日期,要求开始日期不能大于结束日期,但是开始日期可以等于结束日期。

效果如下:

实现代码:

<el-form ref="form" :model="form" :rules="rules" label-width="140px">
    <el-form-item label="开始日期" prop="startDate">
              <el-date-picker
                v-model="form.startDate"
                style="width: 100%"
                clearable
                size="small"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择"
                :picker-options="pickerOptionsStartTime"
              />
      </el-form-item>
      <el-form-item label="结束日期" prop="endDate">
              <el-date-picker
                v-model="form.endDate"
                style="width: 100%"
                clearable
                size="small"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择"
                :picker-options="pickerOptionsNextTime"
              />
      </el-form-item>
</el-form>
export default {
  data() {
    return {
        // 表单参数
      form: {},
      // 表单校验
      rules: {
        startDate: [{ required: true, message: '请选择', trigger: 'blur' }],
        endDate: [{ required: true, message: '请选择', trigger: 'blur' }],
      },
      
      pickerOptionsStartTime: {
        disabledDate: (time) => {
          // let preDate = new Date(choiceDateTime - 1*24*60*60*1000); // 前一天
          // let nextDate = new Date(choiceDateTime + 1*24*60*60*1000); // 后一天
          if (this.form.endDate) {
            let endDateTime = new Date(this.form.endDate).getTime()
            // 租赁开始日期要小于等于租赁结束日期
            return time.getTime() > new Date(endDateTime).getTime()
          }
        },
      },
      pickerOptionsNextTime: {
        disabledDate: (time) => {
          // let preDate = new Date(choiceDateTime - 1*24*60*60*1000); // 前一天
          // let nextDate = new Date(choiceDateTime + 1*24*60*60*1000); // 后一天
          if (this.form.startDate) {
            let startDateTime = new Date(this.form.startDate).getTime()
            // 租赁开始日期要小于于等于租赁结束日期
            return time.getTime() < new Date(startDateTime).getTime() - 8.64e7 // - 8.64e7 代表可以选择和开始日期相同的一天
          }
        },
      },
    }
  }
}

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

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

相关文章

UNI-APP_点击,长按,触摸,结束触摸事件

touchstartEventHandle手指触摸动作开始字节跳动小程序不支持touchmoveEventHandle手指触摸后移动字节跳动小程序不支持touchendEventHandle手指触摸动作结束字节跳动小程序不支持touchcancelEventHandle手指触摸动作被打断&#xff0c;如来电提醒&#xff0c;弹窗字节跳动小程…

errno错误码列举

errno&#xff0c;int变量&#xff0c;表示系统最近一次错误码。 当系统调用和一些库函数发生错误时&#xff0c;会给errno赋值&#xff0c;以指示哪里出了问题。 目录 errno值列表 errno值获取示例 errno值列表 <errno.h>头文件定义了errno的一些值&#xff0c;部分…

Spring MVC框架面试题

目录 一、什么是SpringMVC&#xff1f;简单介绍下你对SpringMVC的理解&#xff1f; 二、SpringMVC的流程&#xff1f; 三、SpringMVC的优点 四、SpringMVC的主要组件 五、SpringMVC怎么样设重定向和转发的&#xff1f; 六、SpringMVC怎么和Ajax相互调用的&#xff1f; 七…

Python酷库之旅-第三方库Pandas(064)

目录 一、用法精讲 251、pandas.Series.tz_localize方法 251-1、语法 251-2、参数 251-3、功能 251-4、返回值 251-5、说明 251-6、用法 251-6-1、数据准备 251-6-2、代码示例 251-6-3、结果输出 252、pandas.Series.at_time方法 252-1、语法 252-2、参数 252-3…

【java】单行注释(//)与多选注释(/* */)

文章目录 单行注释多行注释注意事项 在Java中&#xff0c;注释是用来给代码添加说明的&#xff0c;它不会被编译器执行。Java提供了两种主要的注释方式&#xff1a;单行注释和多行注释&#xff08;有时也称为块注释或块级注释&#xff09;。 单行注释 单行注释以两个正斜杠&…

爬小红book--自定义获取

免责声明:本文仅做分享!!! from DrissionPage import ChromiumPage import time pa str(input("输入关键词&#xff1a;")) pl str(input("输入评论内容&#xff1a;")) page ChromiumPage() page.get(https://www.xiaohongshu.com/search_result?keyw…

php生成xml文件的封装类文件-可生成带缩进格式化的xml文件及关于opcache缓存的操作小工具cachetool的使用

一、php生成xml文件的封装类文件-可生成带缩进格式化的xml文件 最近因为有需要&#xff0c;对生成xml文件进行了一些处理&#xff0c;很早之前使用过SimpleXML加载接口返回的xml数据并处理&#xff0c;这次的使用偏向于XML文件的生成。有一个需求&#xff0c;生成的xml文件格式…

【保姆级讲解下AI绘画自动生成器有哪些?】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

CICD流水线

一、CICD流水线简介 CICD概念 CI/CD流水线是现代软件开发的一个核心概念&#xff0c;它涉及自动化和管理软件从开发到部署的整个生命周期 概念定义 具体有三点&#xff1a;持续集成、持续交付、持续部署 流水线组成为&#xff1a;代码提交、测试、构建、部署、结果通知 二…

营销型豆浆机料理机网站模板/EyouCMS营销型类企业模板

营销型豆浆机料理机网站模板&#xff0c;EyouCMS营销型类企业模板。模板自带eyoucms内核&#xff0c;无需再下载eyou系统&#xff0c;原创设计、手工书写DIVCSS&#xff0c;完美兼容IE7、Firefox、Chrome、360浏览器等&#xff1b;主流浏览器&#xff1b;结构容易优化&#xff…

雨量气象站:实时、准确地监测并记录降水情况

在自然界的水循环中&#xff0c;雨&#xff0c;作为天空与大地的信使&#xff0c;不仅滋养了万物&#xff0c;也影响着人类社会的方方面面。为了更准确地监测和预测降水情况&#xff0c;雨量气象站应运而生&#xff0c;成为了现代气象观测体系中重要的一环。 雨量气象站&#x…

FFmpeg源码:av_reduce函数分析

AVRational结构体和其相关的函数分析&#xff1a; FFmpeg有理数相关的源码&#xff1a;AVRational结构体和其相关的函数分析 FFmpeg源码&#xff1a;av_reduce函数分析 一、av_reduce函数的声明 av_reduce函数声明在FFmpeg源码&#xff08;本文演示用的FFmpeg源码版本为7.0…

P10477 题解

题目传送门 题目传送门&#xff08;洛谷&#xff09; Step1 理解题意 一共有 T T T 组数据有一个地铁&#xff0c;有一个中心车站&#xff08;即为根&#xff09;&#xff0c;有一个人从中心车站出发。对于每组数据&#xff0c;给定两个同样长度的01串 s 1 s_1 s1​ , s …

五、MYSQL企业常用架构与调优经验理论篇

&#x1f33b;&#x1f33b; 目录 一、选择 PerconaServer、MariaDB 还是 MYSQL二、常用的 MYSQL 调优策略三、MYSOL 常见的应用架构分享四、MYSOL 经典应用架构 注&#xff1a;全是理论干货&#xff0c;没有实战&#xff0c;想看实战的绕路哦&#xff01;&#xff01;&#xf…

ScriptEcho:AI赋能的前端代码生成神器

ScriptEcho&#xff1a;AI赋能的前端代码生成神器 在前端开发中&#xff0c;如果你总是觉得写代码太费时费力&#xff0c;那么 ScriptEcho 将成为你的救星。这个 AI 代码生成平台不仅能帮你省下大量时间&#xff0c;还能让你轻松愉快地写出生产级代码。本文将带你了解 ScriptEc…

Java中spring boot validation 自定义注解使用

创建一个注解 Target({ElementType.FIELD})//需要写注解的三三个要素 Retention(RUNTIME) Documented Constraint(validatedBy {IsSystemYesNoVaildation.class})//绑定 在这里会报错 你需要去实现 public interface IsSystemYesNo {String message() default "数据字典&…

【Python实战】如何优雅地实现文字 二维码检测?

前几篇&#xff0c;和大家分享了如何通过 Python 和相关库&#xff0c;自动化处理 PDF 文档&#xff0c;提高办公效率。 【Python实战】自动化处理 PDF 文档&#xff0c;完美实现 WPS 会员功能【Python实战】如何优雅地实现 PDF 去水印&#xff1f;【Python实战】一键生成 PDF…

自媒体新闻资讯类网站模板/EyouCMS自媒体资讯类网站模板

自媒体新闻资讯类网站模板&#xff0c;EyouCMS自媒体资讯类网站模板。模板自带eyoucms内核&#xff0c;无需再下载eyou系统&#xff0c;原创设计、手工书写DIVCSS&#xff0c;完美兼容IE7、Firefox、Chrome、360浏览器等&#xff1b;主流浏览器&#xff1b;结构容易优化&#x…

U460909 [BCSP小高2024T4]先序遍历/小羊的晚餐 题解

Part.1 有关本题 本蒟蒻想起这道巧妙 又毒瘤 的题&#xff0c;到处搜寻提交窗口。好不容易找到窗口&#xff0c;有花了 3 h 3h 3h 的时间调题。 本蒟蒻为了悲剧不再发生&#xff0c;于是出了这道题&#xff0c;有写下了这篇题解以供后人。 以下的题解默认以阅读过原题。 P…

数学建模--禁忌搜索

目录 算法基本原理 关键要素 应用实例 实现细节 python代码示例 总结 禁忌搜索算法在解决哪些具体类型的组合优化问题中最有效&#xff1f; 禁忌搜索算法的邻域结构设计有哪些最佳实践或案例研究&#xff1f; 如何动态更新禁忌表以提高禁忌搜索算法的效率和性能&#…