react16+antd4 RangePicker組件實(shí)現(xiàn)時間禁選示例

更新時間：2023年05月31日 08:51:39 作者：灰太狼的情與殤

這篇文章主要為大家介紹了react16+antd4 RangePicker 時間禁選示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

開發(fā)環(huán)境 react16+antd4

電腦系統(tǒng) windows11專業(yè)版

分享一下 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}
/>