随笔 - 135  文章 - 0  评论 - 2  阅读 - 18万

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
            <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;
};

  

posted on   稳住别慌  阅读(813)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示