关于react.js:react16antd4-RangePicker-时间禁选

39次阅读

共计 2649 个字符，预计需要花费 7 分钟才能阅读完成。

1. 开发环境 react16+antd4
2. 电脑系统 windows11 专业版
3. 分享一下 react+antd RangePicker 组件的工夫禁选; 废话不多说, 间接上代码:

const [dateType, setdataType] = useState([
    {
        value: '按日',
        key: 1
    },
    {
        value: '按月',
        key: 2
    }
]);
const [dateTime, setDateTime] = useState([moment().add(-1, 'years').add(0, "months").format("YYYY-MM"),
    moment().format("YYYY-MM"),
]);
const [timeValue, setTimeValue] = useState([moment(moment().add(-1, 'years').add(0, "months"), 'YYYY-MM'),
    moment(moment(), 'YYYY-MM')
]);
const [timeFormat, setTimeFormat] = useState('YYYY-MM');
const [pickerValue, setPickerValue] = useState('month');

const getDay = () => {
        setDateTime([moment().add(-1, "months").format("YYYY-MM-DD"),
            moment().format("YYYY-MM-DD"),
        ]);
        setTimeValue([moment(moment().add(-1, "months"), 'YYYY-MM-DD'),
            moment(moment(), 'YYYY-MM-DD')
        ]);
        setTimeFormat('YYYY-MM-DD');
        setPickerValue('date');
    };

    const getMonth = () => {
        setDateTime([moment().add(-1, 'years').add(0, "months").format("YYYY-MM"),
            moment().format("YYYY-MM"),
        ]);
        setTimeValue([moment().add(-1, 'years').add(0, "months"),
            moment(moment(), 'YYYY-MM')
        ]);
        setTimeFormat('YYYY-MM');
        setPickerValue('month');
    }

    // 工夫类型 变动
    const TimeTypeChange = (value, option) => {setdateTypeValue(value);
        switch (+value) {
            case 1:// 按日
                getDay();
                break;
            case 2:// 按月
                getMonth();
                break;
        }
    }

    const timeDisabled = (current) => {switch (+dateTypeValue) {
            case 1:// 按日
                return day_disabledDate(current);
                break;
            case 2:// 按月
                return month_disabledDate(current);
                break;
        }
    }

    const month_disabledDate = (current) => {if (!timeValue) {return false;}

        const tooLate = timeValue[0] && current.diff(timeValue[0], 'months') > 11;
        const tooEarly = timeValue[1] && timeValue[1].diff(current, 'months') > 11;
        return !!tooEarly || !!tooLate;
    };

    const day_disabledDate = (current) => {if (!timeValue) {return false;}

        const tooLate = timeValue[0] && current.diff(timeValue[0], 'months') > 0;
        const tooEarly = timeValue[1] && timeValue[1].diff(current, 'months') > 0;
        const disable_day = current && current < moment().endOf('day');
        return !!tooEarly || !!tooLate || !disable_day;
    }

    const onOpenChange = (open) => {if (open) {setTimeValue([null, null]);
        }
    };

    const _onRangePickerChange = (date, dateString) => {// setTimeValue(dateString);
        setTimeValue(date);
        setDateTime(dateString);
    }

    const onCalendarChange = (value) => {setTimeValue(value);
    }

<Select placeholder='请抉择工夫类型'
    value={dateTypeValue == 1 ? '按日' : '按月'}
    onChange={TimeTypeChange}
    getPopupContainer={triggerNode => triggerNode.parentElement}>
    {dateType && dateType.map((item) => {
        return (<Option key={item.key} value={item.key}>{item.value}</Option>
        )
    })}
</Select>
<RangePicker
    style={{width: 330, marginLeft: 5}}
    value={timeValue}
    format={timeFormat}
    allowClear={false}
    disabledDate={timeDisabled}
    picker={pickerValue}
    onChange={_onRangePickerChange}
    onOpenChange={onOpenChange}
    onCalendarChange={onCalendarChange}
/>

4. 成果如下: