在表格中的 Antd Datepicker 中使用 disabledDate

Question

import React from "react";
import ReactDOM from "react-dom";
import { version, DatePicker, Table } from "antd";
import "antd/dist/antd.css";
import "./index.css";
import moment from "moment";

function disabledDate(current) {
  const now = moment();
  return (
    current &&
    (current < now.subtract(1, "day") || current > now.add(6, "months"))
  );
}

const columns = [
  {
    title: "date",
    dataIndex: "date",
    render: text => {
      return <DatePicker disabledDate={disabledDate} value={moment(text)} />;
    }
  }
];

const dataSource = [
  {
    key: "1",
    date: 1582863300000
  },
  {
    key: "2",
    date: 1583761200000
  }
];

ReactDOM.render(
  <div className="App">
    <p>antd version:{version}</p>
    <Table columns={columns} dataSource={dataSource} />
  </div>,
  document.getElementById("root")
);

我正在使用Antd Datepicker，我希望用户只能选择今天而不是6个月后。但是在表格中，第一行可以，第二行可以选择昨天。 这是codeandbox链接：https://codesandbox.io/s/antd-reproduction-template-u1edz

Answer 1

DatePicker 没有问题，因为如果您设置相同的两个日期，您将看到相同的结果，问题在于您提供的第二个日期和 disabledDate 逻辑。

const dataSource = [
  {
    key: '1',
    date: 1582863300000
  },
  {
    key: '2',
    // set the same date and see no diff date: 1582863300000
    date: 1583761200000
  }
];

据我了解，您要实现下一个逻辑：

today <= can be selected <= today + 6 months

这是：

function disabledDate(current) {
  const now = moment();
  return (
    current && (now.endOf('day') > current || current > now.add(6, 'months'))
  );
}