拥抱 DatePicker：Ant Design 的自定义可选时间范围探索之旅

2023-10-18 10:50:54

在数字世界的脉搏中，时间是至关重要的元素。它记录着我们的过去，见证着我们的现在，并指引着我们的未来。在构建 Web 应用时，我们经常需要处理日期和时间，而 Ant Design 的 DatePicker 组件提供了强大的功能来帮助我们实现对时间的掌控。

然而，有时我们需要对日期的选择进行更精细化的控制，比如只允许用户选择某个特定时间段内的日期。为了满足这一需求，Ant Design 提供了一个名为 disabledDate 的 API，它允许我们根据给定的条件禁用某些日期。

在本文中，我们将深入探索 disabledDate API 的使用，并通过丰富的实例和代码示例，向您展示如何自定义可选时间范围，从而充分利用 DatePicker 组件的强大功能。

禁用特定日期

disabledDate API 最简单用法是禁用特定日期。

import { DatePicker } from 'antd';

const App = () => {
  const disabledDate = (current) => {
    // 禁用2023年1月1日
    return current && current.valueOf() === new Date('2023-01-01').valueOf();
  };

  return (
    <DatePicker disabledDate={disabledDate} />
  );
};

export default App;

在这个例子中，我们使用了一个称为 valueOf() 的 JavaScript 方法来比较日期的值。我们还可以使用诸如 getTime() 或 toDateString() 等其他方法。

disabledDate 函数接收一个参数 current，它是一个 moment 对象，代表当前日期。函数的返回值决定了该日期是否被禁用。如果返回值为 true，则该日期将被禁用；如果返回值为 false，则该日期将被启用。

我们还可以禁用一组日期。

import { DatePicker } from 'antd';

const App = () => {
  const disabledDate = (current) => {
    // 禁用2023年1月1日和2023年1月5日
    return current && (current.valueOf() === new Date('2023-01-01').valueOf() || current.valueOf() === new Date('2023-01-05').valueOf());
  };

  return (
    <DatePicker disabledDate={disabledDate} />
  );
};

export default App;

禁用日期范围

除了禁用特定日期，我们还可以禁用日期范围。

import { DatePicker } from 'antd';

const App = () => {
  const disabledDate = (current) => {
    // 禁用2023年1月1日至2023年1月5日之间的日期
    return current && (current.valueOf() >= new Date('2023-01-01').valueOf() && current.valueOf() <= new Date('2023-01-05').valueOf());
  };

  return (
    <DatePicker disabledDate={disabledDate} />
  );
};

export default App;

在这个例子中，我们使用了一个称为 >= 和 <= 的 JavaScript 运算符来比较日期的值。我们还可以使用其他运算符，例如 <、>、=== 和 !==。

禁用未来日期

disabledDate API 还可以用于禁用未来日期。

import { DatePicker } from 'antd';

const App = () => {
  const disabledDate = (current) => {
    // 禁用当前日期之后的日期
    return current && current.valueOf() > new Date().valueOf();
  };

  return (
    <DatePicker disabledDate={disabledDate} />
  );
};

export default App;

在这个例子中，我们使用了一个称为 > 的 JavaScript 运算符来比较日期的值。

禁用过去日期

disabledDate API 还可以用于禁用过去日期。

import { DatePicker } from 'antd';

const App = () => {
  const disabledDate = (current) => {
    // 禁用当前日期之前的日期
    return current && current.valueOf() < new Date().valueOf();
  };

  return (
    <DatePicker disabledDate={disabledDate} />
  );
};

export default App;