如何根据使用antd的选择在两个日期之间禁用一个日历中的日期？

Question

我在一个日历中有一个日期，例如我不应该选择1975年之前或2012之后的日期，只允许1975年到2012年之间的日期。

如何将日历限制为日期范围？

我的示例datePicker：

import { AntDatePicker } from "./shared/CreateAntFields";

class DatePickerComponent extends React.Component {

    state = { 
        visible: false,  
    }

    disabledDate(current) {
        const startDate = '1992-05-12';
        console.log("StartDate",startDate)
        const endDate = new Date()
        console.log("EndDate",endDate)
        return startDate && endDate < moment().endOf('year');
    }

    render() {
        const { values, handleSubmit, setFieldValue } = this.props
        return (
            <div align="center">

                <Form onSubmit={handleSubmit}>

                    <Field
                        name="dateOfBirth"
                        label="Date Of Birth"
                        placeholder="Date Of Birth"
                        component={AntDatePicker}
                        value={values.dateOfBirth}
                        disabledDate={this.disabledDate}


                    />

                    <Button type="primary" htmlType="submit">Submit</Button>

                </Form>
            </div>
        )
    }

}

const DatePickerRange = (withFormik)({
    handleSubmit(values, { resetForm }) {
        resetForm();
        console.log(values)
    }

})(DatePickerComponent)

Answer 1

你几乎得到了，

let startDate = moment('2/2/1975') //anydate in 1975 works
let endDate = moment('2/2/2012') //anydate in 2012 works

return current < startDate.startOf('year') || current > endDate.endOf('year');

Answer 2

尝试这些函数来处理你的日期选择器

      disabledStartDate = (startValue) => {
            const endValue = this.state.endValue;
            if (!startValue || !endValue) {
                return false;
            }
            return startValue.valueOf() > endValue.valueOf();
        };
        disabledEndDate = (endValue) => {
            const startValue = this.state.startValue;
            if (!endValue || !startValue) {
                return false;
            }
            return endValue.valueOf() <= startValue.valueOf();
        };
   handleStartOpenChange = (open) => {
    if (!open) {
        this.setState({ endOpen: true });
    }
};
handleEndOpenChange = (open) => {
    this.setState({ endOpen: open });
};

并在您的开始日期和结束日期datepicker

<DatePicker  showTime disabledDate={this.disabledStartDate}
                                    format="YYYY-MM-DD HH:mm:ss" value={startValue}
                                    onChange={this.onStartChange} onOpenChange={this.handleStartOpenChange} />