关于 Antd 组件库中的 DatePicker 如何设置默认日期及禁用日期

「这是我参与2022首次更文挑战的第20天，活动详情查看：2022首次更文挑战」

设置默认日期

Moment.js 是一个轻量级的 JavaScript 时间库，它方便了日常开发中对时间的操作，提高了开发效率。

日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。

比如，希望获取基于当前时刻的一周前的日期，那么可以这样写：

const teaday = moment().subtract("7", "day").format(“YYYY-MM-DD HH:mm:ss”);

那么结合 Antd 组件库中的 DatePicker 日期组件，我们可以这样使用。

import { DatePicker } from "antd";
import moment from "moment";

const { RangePicker } = DatePicker;

const List = () => {
  const dateFormat = "YYYY-MM-DD HH:mm:ss";
  const teaday = moment().subtract("7", "day").format(dateFormat);
  const now = moment().format(dateFormat);

  return (
    <div>
      <RangePicker showTime defaultValue={[moment(teaday, dateFormat), moment(now, dateFormat)]} />
    </div>
  );
};

export default List;

通过 Moment.js + DatePicker 的结合，就可以动态的显示时间和日期。

当然，我们也可以把 Moment.js 的用法封装成一个函数，这样传入数字，返回我们需要的日期，比如这样

const changeRadioTime = (value: string) => {
  let time = "";
  switch (value) {
    case "half_hour":
      time = moment().add(30, "minutes").format("YYYY-MM-DD HH:mm:ss");
      break;
    case "one_day":
      time = moment().add(1, "days").format("YYYY-MM-DD HH:mm:ss");
      break;
    case "seven_days":
      time = moment().add(7, "days").format("YYYY-MM-DD HH:mm:ss");
      break;
    case "fourteen_days":
      time = moment().add(14, "days").format("YYYY-MM-DD HH:mm:ss");
      break;
    case "ten_minutes":
      time = moment().add(10, "minutes").format("YYYY-MM-DD HH:mm:ss");
      break;
    default:
      time = "";
      break;
  }
  return time;
};

分别获取 10分钟，30分钟，1天，7天，14天后的时间。

设置禁用日期

比如说一个业务场景，禁用小于当前时间的全部日期和时间。

Antd 组件库文档中：可用 disabledDate 和 disabledTime 分别禁止选择部分日期和时间，其中 disabledTime 需要和 showTime 一起使用。

这时需要为 DatePicker 设置 disabledDate 和 disabledDateTime

function range(start, end) {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
}

function disabledDate(current) {
  return current && current <= moment().subtract(1, "days");
}

function disabledDateTime() {
  const hours = moment().hours();
  const minutes = moment().minutes();
  const seconds = moment().seconds();

  return {
    disabledHours: () => range(0, hours),
    disabledMinutes: () => range(0, minutes),
    disabledSeconds: () => range(0, seconds),
  };
}

<RangePicker
  showTime
  defaultValue={[moment(teaday, dateFormat), moment(now, dateFormat)]}
  disabledDate={disabledDate}
  disabledTime={disabledDateTime}
/>

这就生效了。

ok，今天的文章就分享到这里了。