vue3 ElementUI 日期禁选当日前当日后三天后的实现代码

 更新时间:2024年05月17日 16:45:33   作者:慕宥晶  
这篇文章主要介绍了vue3 ElementUI 日期禁选当日前当日后三天后的实现代码,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

今日之前禁用

代码: ( 主要是 :disabledDate=“disabledDateFun” )

<el-date-picker
v-model="queryForm.selectedDate"
    type="date"
    range-separator="-"
    placeholder="选择日期"
    :disabledDate="disabledDateFun" 
    clearable />

/今天之前日期方法

    //设置发布日期大于等于当前日期
    const disabledDateFun = time => {
        //今天之前日期
         if (time.getTime() < new Date().getTime()) {
             return time.getTime() <= new Date().getTime() - 1 * 8.64e7; //时间范围必须是时间戳
         }
    };

/今天之后日期方法

    //设置发布日期大于等于当前日期
    const disabledDateFun = time => {
        // 今天之后的日期都禁选
         let curDate = new Date().getTime();
         let three = 3 * 100 * 24 * 3600 * 1000;
         let threeMonths = curDate - three;
         console.log(threeMonths, "threeMonths");
         return time.getTime() > Date.now() || time.getTime() < threeMonths;
    };

今天之后3天日期方法

    //设置发布日期大于等于当前日期
    const disabledDateFun = time => {
        return time.getTime() - 3 * 24 * 3600 * 1000 > Date.now();// -3天就是3天后, +3就是3天前
    };

在这里插入图片描述

到此这篇关于vue3 ElementUI 日期禁选当日前当日后三天后的文章就介绍到这了,更多相关vue3 ElementUI 日期禁选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue大数据表格卡顿问题的完美解决方案

    vue大数据表格卡顿问题的完美解决方案

    这篇文章主要给大家介绍了基于vue大数据表格卡顿问题的完美解决方案,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • Vue实现计数器案例

    Vue实现计数器案例

    这篇文章主要为大家详细介绍了Vue计数器案例的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue如何动态修改el-table的某列数据

    Vue如何动态修改el-table的某列数据

    这篇文章主要介绍了Vue如何动态修改el-table的某列数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue2.0结合Element实现select动态控制input禁用实例

    vue2.0结合Element实现select动态控制input禁用实例

    本篇文章主要介绍了vue2.0结合Element实现select动态控制input禁用实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • vue通过获取url中的信息登录页面的代码详解

    vue通过获取url中的信息登录页面的代码详解

    这篇文章主要给大家介绍了vue通过获取url中的信息登录页面的方法,文中通过代码示例给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下
    2024-02-02
  • vue时间戳和时间的相互转换方式

    vue时间戳和时间的相互转换方式

    本文通过示例代码介绍了vue时间戳和时间的相互转换方式,通过场景分析介绍了vue3使用组合式api将时间戳格式转换成时间格式(2023年09月28日 10:00),感兴趣的朋友一起看看吧
    2023-12-12
  • Vue中Axios中取消请求及阻止重复请求的方法

    Vue中Axios中取消请求及阻止重复请求的方法

    为了防止用户在网络不好或者其他情况下短时间内重复进行接口请求,重复发送多次请求,本文主要介绍了Vue中Axios中取消请求及阻止重复请求的方法,感兴趣的可以了解一下
    2022-02-02
  • 使用Vite处理css less及postcss示例详解

    使用Vite处理css less及postcss示例详解

    这篇文章主要为大家介绍了使用Vite处理css less及postcss的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 详解如何使用Vue实现图像识别和人脸对比

    详解如何使用Vue实现图像识别和人脸对比

    随着人工智能的发展,图像识别和人脸识别技术已经被广泛应用于各种应用程序中,Vue为我们提供了许多实用工具和库,可以帮助我们在应用程序中进行图像识别和人脸识别,在本文中,我们将介绍如何使用Vue进行图像识别和人脸对比,需要的朋友可以参考下
    2023-06-06
  • vue3输入无效路由跳转到指定error页面问题

    vue3输入无效路由跳转到指定error页面问题

    这篇文章主要介绍了vue3输入无效路由跳转到指定error页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论