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写一个全局Message组件的实现

    基于vue写一个全局Message组件的实现

    这篇文章主要介绍了基于vue写一个全局Message组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue 组件异步加载方式(按需加载)

    vue 组件异步加载方式(按需加载)

    这篇文章主要介绍了vue 组件异步加载方式(按需加载),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue 2.5 Level E 发布了: 新功能特性一览

    Vue 2.5 Level E 发布了: 新功能特性一览

    很高兴Vue 2.5 Level E 发布了。在这篇文章中,我们将重点介绍一些更重要的的变化:更好的 TypeScript 集成,更好的错误处理,更好地支持单文件组件中的函数式组件以及与环境无关的服务端渲染
    2017-10-10
  • Vue中util的工具函数实例详解

    Vue中util的工具函数实例详解

    本文通过实例代码给大家介绍了Vue中util的工具函数,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • VUE中的export default和export使用方法解析

    VUE中的export default和export使用方法解析

    export default和export都能导出一个模块里面的常量,函数,文件,模块等,在其它文件或模块中通过import来导入常量,函数,文件或模块。但是,在一个文件或模块中export,import可以有多个,export default却只能有一个。
    2022-12-12
  • 浅谈webpack编译vue项目生成的代码探索

    浅谈webpack编译vue项目生成的代码探索

    本篇文章主要介绍了浅谈webpack编译vue项目生成的代码探索,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Vue中使用vue-i18插件实现多语言切换功能

    Vue中使用vue-i18插件实现多语言切换功能

    在基于vue-cli项目开发过程中,多语言切换功能可使用vue-i18插件,这篇文章分步骤给大家介绍了Vue中使用vue-i18插件实现多语言切换功能,感兴趣的朋友一起看看吧
    2018-04-04
  • vue select组件的使用与禁用实现代码

    vue select组件的使用与禁用实现代码

    这篇文章主要介绍了vue--select组件的使用与禁用的实现代码,非常不错,具有参考借鉴价值 ,需要的朋友可以参考下
    2018-04-04
  • vue3.0响应式函数原理详细

    vue3.0响应式函数原理详细

    这篇文章主要介绍了vue3.0响应式函数原理,Vue3的响应式系统可以监听动态添加的属性还可以监听属性的删除操作,以及数组的索引以及length属性的修改操作。另外Vue3的响应式系统还可以作为模块单独使用。下面更多介绍,需要的小伙伴可以才可以参考一下
    2022-02-02
  • vue3.x项目中,出现红色波浪线问题及解决

    vue3.x项目中,出现红色波浪线问题及解决

    这篇文章主要介绍了vue3.x项目中,出现红色波浪线问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论