React中使用antd DatePicker限制日期选择

z止于至善

已于 2022-12-28 14:37:52 修改

阅读量2.2k

点赞数 1

分类专栏： React 文章标签： react.js 前端 javascript antd DatePicker

于 2022-12-28 14:28:40 首次发布

本文链接：https://blog.youkuaiyun.com/qq_16525279/article/details/128468095

版权

React 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了在React项目中使用antd DatePicker组件时如何通过disabledDate属性限制用户选择特定日期的方法。具体包括禁止选择今天之前或之后的日期，以及限定日期选择范围不超过7天等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景

React中使用antd DatePicker限制日期选择，有下面一些场景：

1、今天之前的日期不可选择（不包括今天）

disabledDate = (_current) => {
    let current = _current.format('YYYY-MM-DD')
    return current && current < moment().endOf('day').format('YYYY-MM-DD')
}

2、今天之前的日期不可选择（包括今天）

disabledDate = (_current) => {
    let current = _current.format('YYYY-MM-DD')
    return current && current <= moment().endOf('day').format('YYYY-MM-DD')
}

3、今天之后的日期不可选择（不包括今天）

disabledDate = (_current) => {
    let current = _current.format('YYYY-MM-DD')
    return current && current > moment().endOf('day').format('YYYY-MM-DD')
}

4、今天之后的日期不可选择（包括今天）

disabledDate = (_current) => {
    let current = _current.format('YYYY-MM-DD')
    return current && current >= moment().endOf('day').format('YYYY-MM-DD')
}

5、选择不超过7天的范围

startDisabledDate = (_current) => {
    let endDate = moment(this.state.end_date).format('YYYY-MM-DD')
    let endDate2 = moment(endDate).subtract(6, 'days').format('YYYY-MM-DD')
    let current = _current.format('YYYY-MM-DD')
    return current &&
        (
            current > endDate
            ||
            current < endDate2
        )
}
endDisabledDate = (_current) => {
    let startDate = moment(this.state.start_date).format('YYYY-MM-DD')
    let startDate2 = moment(startDate).add(6, 'days').format('YYYY-MM-DD')
    let current = _current.format('YYYY-MM-DD')
    return current &&
        (
            current < startDate
            ||
            current > startDate2
        )
}

6、选择不超过7天的范围以及今天之后的日期不可选择（包括今天）

startDisabledDate = (_current) => {
    let endDate = moment(this.state.end_date).format('YYYY-MM-DD')
    let endDate2 = moment(endDate).subtract(6, 'days').format('YYYY-MM-DD')
    let current = _current.format('YYYY-MM-DD')
    return current &&
        (
            current > endDate
            ||
            current < endDate2
        )
}
endDisabledDate = (_current) => {
    let startDate = moment(this.state.start_date).format('YYYY-MM-DD')
    let startDate2 = moment(startDate).add(6, 'days').format('YYYY-MM-DD')
    let dayDate = moment().endOf('day').format('YYYY-MM-DD')
    let current = _current.format('YYYY-MM-DD')
    if (startDate2 > dayDate) {
        return current &&
            (
                current < startDate
                ||
                current >= dayDate
            )
    } else {
        return current &&
            (
                current < startDate
                ||
                current > startDate2
            )
    }
}

应用

<>
    <p>从</p>
    <RLDatePicker
        allowClear={false}
        onChange={this.startDateChange}
        disabledDate={this.startDisabledDate}
        locale={locale}
        inputReadOnly
        format="YYYY-MM-DD"
        placeholder="请选择日期"
        value={this.state.start_date}
    />
    <p>至</p>
    <RLDatePicker
        allowClear={false}
        onChange={this.endDateChange}
        disabledDate={this.endDisabledDate}
        locale={locale}
        inputReadOnly
        format="YYYY-MM-DD"
        placeholder="请选择日期"
        value={this.state.end_date}
    />
</>