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

z止于至善

已于 2022-12-29 16:28:38 修改

阅读量2.3k

点赞数 5

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

于 2022-12-29 16:26:48 首次发布

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

版权

React 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何在React中使用Ant Design的RangePicker组件来限制用户选择的日期范围，包括仅能选择过去日期、未来日期及限定日期区间等场景，并提供具体实现代码。

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

场景

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

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天的范围（重点）

disabledDate = (_current) => {
    const { dates } = this.state
    if (!dates || dates.length === 0) {
        return false
    }
    const tooLate = dates[0] && _current.diff(dates[0], 'days') > 6
    const tooEarly = dates[1] && dates[1].diff(_current, 'days') > 6
    return !!tooEarly || !!tooLate
}

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

disabledDate = (_current) => {
    const { dates } = this.state
    const current = _current.format('YYYY-MM-DD')
    const dayDate = current && current >= moment().endOf('day').format('YYYY-MM-DD')
    if (!dates || dates.length === 0) {
        return dayDate
    }
    const tooLate = dates[0] && _current.diff(dates[0], 'days') > 6
    const tooEarly = dates[1] && dates[1].diff(_current, 'days') > 6
    return !!tooEarly || !!tooLate || dayDate
}

应用

源码

<RLRangePicker
    locale={locale}
    format='YYYY-MM-DD'
    style={{ marginLeft: 10 }}
    key='time'
    disabledDate={this.disabledDate}
    onCalendarChange={val => {
        this.setState({ dates: val })
    }}
    onChange={this.rangeDateChange}
    onOpenChange={this.onOpenChange}
    value={this.state.dates || this.state.value}
/>

rangeDateChange = (moments, dates) => {
    this.setState({
        value: moments
    })
}

// 弹出日历和关闭日历的回调
onOpenChange = (open) => {
    if (open) {
        this.setState({ dates: [null, null] })
    } else {
        this.setState({ dates: null })
    }
}