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

【问题标题】：How to disable a dates in one calender between two dates based on a selection using antd?如何根据使用 antd 的选择禁用两个日期之间的一个日历中的日期？
【发布时间】：2019-03-13 13:10:00
【问题描述】：

我在一个日历中有一个日期，例如我不应该选择 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)

【问题讨论】：

标签： reactjs gatsby antd formik

【解决方案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');

【讨论】：

如果它对你有用，请接受答案@laxmi

【解决方案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  showTime disabledDate={this.disabledStartDate}
                                    format="YYYY-MM-DD HH:mm:ss" value={startValue}
                                    onChange={this.onStartChange} onOpenChange={this.handleStartOpenChange} />

【讨论】：