CODEWITHSUNDEEP
reactjsantd
franose
franose

Reputation: 35

Using disabledDate in Antd Datepicker in table

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")
);

I'm using Antd Datepicker, and I want users can only select today and not after 6 months.But in table, the first row is okay, the second one can select yesterday. Here is the codesandbox link:https://codesandbox.io/s/antd-reproduction-template-u1edz

Upvotes: 1

Views: 804

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53944

It is not a problem with DatePicker as if you set the same two dates you will see the same result, the problem is with the second date you supply and with disabledDate logic.

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

As I understand, you want to implement the next logic:

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

Which is:

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

Edit antd reproduction template

Upvotes: 2

Related Questions