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 日期禁选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vuex中Modules的使用详解

    vuex中Modules的使用详解

    本文主要介绍了vuex中Modules的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vue中配置scss全局变量的步骤

    vue中配置scss全局变量的步骤

    这篇文章主要介绍了vue中配置scss全局变量的步骤,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • vue3+elementplus 树节点过滤功能实现

    vue3+elementplus 树节点过滤功能实现

    树节点所展示的街道是读取的成都市金牛区的范围边界线的json文件,街道下对应内容市通过fetch调用接口获取的内容,通过mapTreeData函数循环遍历,对数据进行处理,这篇文章主要介绍了vue3+elementplus 树节点过滤功能实现,需要的朋友可以参考下
    2024-05-05
  • el-tree使用获取当前选中节点的父节点数据

    el-tree使用获取当前选中节点的父节点数据

    本文主要介绍了el-tree使用获取当前选中节点的父节点数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-10-10
  • Electron中打包应用程序及相关报错问题的解决

    Electron中打包应用程序及相关报错问题的解决

    这篇文章主要介绍了Electron中打包应用程序及相关报错问题的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue中elementUI表单循环验证方式

    vue中elementUI表单循环验证方式

    这篇文章主要介绍了vue中elementUI表单循环验证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue数组双向绑定问题及$set用法说明

    vue数组双向绑定问题及$set用法说明

    这篇文章主要介绍了vue数组双向绑定问题及$set用法说明,具有很好的参考价值,希望大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue指令只能输入正数并且只能输入一个小数点的方法

    vue指令只能输入正数并且只能输入一个小数点的方法

    这篇文章主要介绍了vue指令只能输入正数并且只能输入一个小数点的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • el-input限制输入正整数的两种实现方式

    el-input限制输入正整数的两种实现方式

    el-input框是Element UI库中的一个输入框组件,用于接收用户的输入,这篇文章主要介绍了el-input限制输入正整数,需要的朋友可以参考下
    2024-02-02
  • 使用Vue3生成二维码和条形码详细图文教程

    使用Vue3生成二维码和条形码详细图文教程

    在Vue项目和微信小程序中生成二维码和条形码是一个常见的需求,主要用于分享、产品识别等场景,这篇文章主要给大家介绍了关于使用Vue3生成二维码和条形码的相关资料,需要的朋友可以参考下
    2024-09-09

最新评论