首页 > 其他分享 >antd限制开始时间与结束时间范围是30天,并不能选择当前日期之后的日期 vue3(默认展示近7天)

antd限制开始时间与结束时间范围是30天,并不能选择当前日期之后的日期 vue3(默认展示近7天)

时间:2023-09-05 16:26:33浏览次数:39  
标签:dates const val dayjs 30 value current 日期 vue3

            <a-range-picker
                :value="hackValue || dateArr"
                :disabled-date="disabledDate"
                style="width: 240px"
                separator="~"
                :allow-clear="false"
                @change="onChange"
                @openChange="onOpenChange"
                @calendarChange="onCalendarChange"
            />

type RangeValue = [Dayjs, Dayjs];

let dateArr = ref<RangeValue>([
    dayjs(dayjs().subtract(7, 'day')),
    dayjs(dayjs()),
]);


const dates = ref<RangeValue>();
const hackValue = ref<RangeValue>();

const disabledDate = (current: Dayjs) => {
    if (!dates.value || (dates.value as any).length === 0) {
        return current && current > dayjs().endOf('day');
    }
    const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 30;
    const tooEarly =
        dates.value[1] && dates.value[1].diff(current, 'days') > 30;
    return tooEarly || tooLate || current > dayjs().endOf('day');
};
const onOpenChange = (open: boolean) => {
    if (open) {
        dates.value = [] as any;
        hackValue.value = [] as any;
    } else {
        hackValue.value = undefined;
    }
};
const onChange = (val: RangeValue) => {
    dateArr.value = val;
    // 获取接口
};

const onCalendarChange = (val: RangeValue) => {
    dates.value = val;
};

  

标签:dates,const,val,dayjs,30,value,current,日期,vue3
From: https://www.cnblogs.com/hwy6/p/17679956.html

相关文章

  • Vue3带来的新变化
    Vue3带来的新变化性能提升首次渲染更快diff算法更快内存占用更少打包体积变小更好的Typescript支持CompositionAPI (重点)在使用vue2.x版本开发较复杂的组件时,逻辑难以复用,组合式api的出现可以解决此类问题相关阅读:Vue3中文文档 https://vue3js.cn/docs/zh/......
  • 接下来做的一些事20230905
    上一篇后缀自动机。数论。凸包。卷积。平衡树。圆方树。会尝试像\(6\)月的某段时间一样对自己做的每道题写一句话题解,以及评分。分数等级分为easy,easy+,medium,hard,hard+。每一档的意思为:easy自己能轻松做出来easy+自己花了一定功夫才能做出来medium会有些步骤......
  • 从零开始一个vue3前端项目day04-头部导航篇
    在实际开发项目中通常会把头部导航栏写成一个通用组件,这里来具体说一下实现思路1:front-header组件就是我们的头部导航栏,路由我们已经配置好了,把每个导航的首页路径,配置成navList(包含name,path),这样就通过遍历navList就能写出一个首页导航组件 2:导航的选中状态实现,不仅仅是切......
  • 失效日期管理和账户锁定2
    一:chage命令设置密码的失效日期 使用chage命令检查系统中密码的失效日期的命令格式:   change-l用户名使用chage命令设置不更改密码可以使用的最长天数的命令格式: change-M天数用户名使用chage命令检查密码更改到期的宽限天数的命令格式: change-l天数用户名使用ch......
  • 【230905-5】用Canvas上勾画对数曲线:y=log10_x
    【图像】【代码】<!DOCTYPEhtml><htmllang="utf-8"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><head><title>勾画log10_x</title><styletype="text/css"......
  • 20230711 12. 本地方法
    本地方法原则上说,“100%纯Java”的解决方案是非常好的,但有时你也会想要编写或使用其他语言的代码(这种代码通常称为本地代码)特别是在Java的早期阶段,许多人都认为使用C++来加速Java应用中关键部分是个好主意。但是,实际上,这基本上是徒劳的。Java平台实现比网络I/O......
  • 20230619 Java核心技术(Java 17)(原书第12版)【归档】
    介绍版本Java版本:17说明关于图形相关的章节全部跳过,部分不常见不常用的也跳过书中内容有些确实全面,但是要注意也有些重要的部分没有涉及,例如NIO读书只是概览,掌握知识体系更进一步还要通过看代码深入掌握目录卷1基础知识1.Java程序设计概述2.Java编程环境3.......
  • 20230522 java.time.Instant
    介绍java.time.Instant类声明@jdk.internal.ValueBasedpublicfinalclassInstantimplementsTemporal,TemporalAdjuster,Comparable<Instant>,Serializable时间线上的一个瞬时点,可以理解成时刻被称为“新纪元”的时间线原点被设置为穿过伦敦格林威治皇家天文台的......
  • 20230628 java.net.HttpURLConnection
    介绍java.net.HttpURLConnectionpublicabstractclassHttpURLConnectionextendsURLConnectionAPI常量HTTP状态码HTTP_OK:200HTTP_CREATED:201HTTP_ACCEPTED:202HTTP_NOT_AUTHORITATIVE:203HTTP_NO_CONTENT:204HTTP_RESET:205HTTP_PARTIAL:206H......
  • 20230528 java.beans.BeanDescriptor
    介绍java.beans.BeanDescriptorpublicclassBeanDescriptorextendsFeatureDescriptorAPI构造器BeanDescriptor(Class<?>beanClass)BeanDescriptor(Class<?>beanClass,Class<?>customizerClass)publicgetBeanClassgetCustomizerClass......