DatePicker日期选择器如何限制只能选择未来三天内的日期？

先说问题出在哪，你写的 moment().add(3, 'days') 报错是因为项目里可能没正确引入 moment.js，Ant Design 的 DatePicker 默认依赖 moment.js 来处理日期。如果直接用 moment 而没有引入它，就会报 "moment is not defined"。

解决这个问题分两步：第一步是确保正确引入了 moment.js；第二步是实现限制未来三天的逻辑。具体来说，disabledDate 是一个函数，用来控制哪些日期不可选，我们需要在这个函数里写清楚哪些日期要禁用。

下面是一个完整的解决方案：

import React from 'react';

import { DatePicker } from 'antd';

import moment from 'moment'; // 确保正确引入 moment



const App = () => {

  const disabledDate = (current) => {

    // 如果 current 是 null 或 undefined，直接返回 false

    if (!current) {

      return false;

    }

    // 获取今天的日期

    const today = moment().startOf('day');

    // 计算三天后的日期，包含当天

    const threeDaysLater = moment().add(3, 'days').endOf('day');

    // 禁用今天之前的日期和三天之后的日期

    return current.isBefore(today, 'day') || current.isAfter(threeDaysLater, 'day');

  };



  return (

    <DatePicker

      disabledDate={disabledDate} // 使用自定义的 disabledDate 函数

    />

  );

};



export default App;

这段代码的核心逻辑在 disabledDate 函数里。我们用 moment().startOf('day') 获取今天的零点时间，用 moment().add(3, 'days').endOf('day') 获取三天后当天的最后一秒。这样可以确保用户只能选择从今天开始到三天后的日期范围。

为什么要用 startOf('day') 和 endOf('day')？因为日期比较时如果不处理时间部分，可能会有意外情况。比如用户选的是今天下午三点，而你的 moment() 默认带上当前时间，可能导致判断不准。用 startOf('day') 和 endOf('day') 可以避免这种问题。

还有一点需要注意，如果你用的是 Ant Design v5，官方推荐使用 dayjs 而不是 moment.js，因为 dayjs 更轻量。如果是这种情况，你需要改成用 dayjs 的 API，类似这样：

import React from 'react';

import { DatePicker } from 'antd';

import dayjs from 'dayjs';



const App = () => {

  const disabledDate = (current) => {

    if (!current) {

      return false;

    }

    const today = dayjs().startOf('day');

    const threeDaysLater = dayjs().add(3, 'day').endOf('day');

    return current.isBefore(today) || current.isAfter(threeDaysLater);

  };



  return (

    <DatePicker

      disabledDate={disabledDate}

    />

  );

};



export default App;

最后吐槽一句，前端处理日期真的挺烦的，尤其是跨库的时候，稍不注意就掉坑里了。记得检查你的依赖版本，别让工具库的差异再浪费时间了。