react antdesign 月份 季度 年度不可选

114 阅读1分钟
   
   // 清空时间组件,保证禁止选择生效 涉及月度与季度
    const onOpenChange = (open: boolean) => {
        if (open) {
            setDates([null, null]);
        } else {
            setDates(null);
        }
    };


       // 手动触发时间控件设置与请求
    const onPanelChange = (value: any, mode: any) => {
        setQuarter(value)
        run({ datetype: valueRadio, times: mode, business_line: ctxlint.line })
    }
    
   //页面
   
   <RangePicker
                        picker="quarter"
                        size="small"
                        allowClear={false}
                        value={dates || quarter}
                        disabledDate={disabledQuarter}
                        onChange={(value, mode) => onPanelChange(value, mode)}
                        onCalendarChange={val => setDates(val)}
                        onOpenChange={onOpenChange} 
                        bordered={false}
                        format='YYYY-[Q]Q'
                        style={{width: '200px', marginRight: '30px'}}
                        />
                        
  // 时间组件 不可选季度 21年起始时间
    const disabledQuarter: RangePickerProps['disabledDate'] = current => {
        if (!dates) {
            return current && current < moment([2021]) || current > moment().endOf('quarter');
        }
        const tooLate = dates[0] && current.diff(dates[0], 'quarter') > 3 || (current && current < moment([2021]) || current > moment().endOf('quarter'));
        const tooEarly = (current && current < moment([2021]) || current > moment().endOf('quarter')) || dates[1] && dates[1].diff(current, 'quarter') > 2;
        return !!tooEarly || !!tooLate;

    };
 // 时间组件 不可选月份  不能大于12个月
    const disabledDate: RangePickerProps["disabledDate"] = (current) => {
        if (!dates) {
            return (
                (current && current < moment([2021])) || current > moment().endOf("month")
            );
        }
        const tooLate = (dates[0] && current.diff(dates[0], "month") > 10) || (current && current < moment([2021])) || current > moment(ctx.disEndTimes).endOf("month");
        const tooEarly = (current && current < moment([2021])) || current > moment(ctx.disEndTimes).endOf("month") || (dates[1] && dates[1].diff(current, "month") > 10);
        return !!tooEarly || !!tooLate;
    };

    // 不可选季度 -不能大于12个季度
    const disabledQuarter: RangePickerProps["disabledDate"] = (current) => {
        if (!dates) {
            return (
                (current && current < moment([2021])) ||
                current > moment().endOf("quarter")
            );
        }
        const tooLate =
            (dates[0] && current.diff(dates[0], "quarter") > 11) ||
            (current && current < moment([2021])) ||
            current > moment().endOf("quarter");
        const tooEarly =
            (current && current < moment([2021])) ||
            current > moment().endOf("quarter") ||
            (dates[1] && dates[1].diff(current, "quarter") > 10);
        return !!tooEarly || !!tooLate;
    };

    // 不可选年度  不能小于21年
    const disabledYear: RangePickerProps["disabledDate"] = (current) => {
        // Can not select days before today and today
        return (
            (current && current < moment([2021])) || current > moment().endOf("year")
        );
    };