antd中的表格表单+日期选择限制

antd中的表格表单+日期限制

经常会遇到这种需求，一个表格中需要有可编辑的input，甚至可能还会有日期组件，而官方的demo中并没有这类案例

Formtable

import { Button, Form, Input, Table } from "antd";
import React, { useEffect } from "react";

import Datepicker from "./Datepicker";

import moment from "moment";

const Formtable = (props) => {
  const [form] = Form.useForm();
  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "年龄",
      dataIndex: "age",
      key: "age",
      render: (text, record, index) => {
        return (
          <Form.Item name={["table", index, "age"]}>
            <Input placeholder="请输入年龄" />
          </Form.Item>
        );
      },
    },
    {
      title: "日期",
      dataIndex: "date",
      key: "date",
      render: (text, record, index) => {
        return (
          <Form.Item name={["table", index, "date"]}>
            <Datepicker time={text} form={form} nameDate={index} />
          </Form.Item>
        );
      },
    },
  ];

  useEffect(() => {
    // ## 初始化表格数据(在没有请求到数据前有一行做展示)

    // form.setFieldsValue({
    //   table: [
    //     {
    //       key: "",
    //       name: "",
    //       age: "",
    //       date: "",
    //     },
    //   ],
    // });
    setTimeout(() => {
      // ## 模拟请求后获取的table数据
      form.setFieldsValue({
        table: [
          {
            key: "1",
            name: "胡彦斌",
            age: 32,
            date: [
              moment("2022-01-30", "YYYY-MM-DD"),
              moment("2022-02-01", "YYYY-MM-DD"),
            ],
          },
          {
            key: "2",
            name: "胡彦祖",
            age: 42,
            date: [
              moment("2022-02-01", "YYYY-MM-DD"),
              moment("2022-03-31", "YYYY-MM-DD"),
            ],
          },
        ],
      });
    }, 1000);
  }, []);

  const onFinish = (values) => {
    // ## 点击Submit提交后
    console.log(values);
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="table" valuePropName="dataSource">
        <Table bordered columns={columns} pagination={false} />
      </Form.Item>
      <Form.Item>
        <Button htmlType="submit" type="primary">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Formtable;

Datepicker

该日期组件进行了选择限制，比如我选择了1月01日，那么结束日期就只能选择1月08日

import { DatePicker } from "antd";
import React, { useState } from "react";

import moment from "moment";

const { RangePicker } = DatePicker;
const Datepicker = ({ time, form, nameDate }) => {
  const [dates, setDates] = useState(time);
  const [value, setValue] = useState(null);
  const disabledDate = (current) => {
    if (!dates) {
      return false;
    }
    const tooLate = dates[0] && current.diff(dates[0], "days") > 7;
    const tooLateTwo = dates[0] && current.diff(dates[0], "days") < 7;
    const tooEarly = dates[1] && dates[1].diff(current, "days") > 7;
    const tooEarlyTwo = dates[1] && dates[1].diff(current, "days") < 7;
    return !!tooEarly || !!tooLate || !!tooLateTwo || !!tooEarlyTwo;
  };
  const onOpenChange = (open) => {
    if (open) {
      setDates([null, null]);
    } else {
      setDates(null);
      // console.log(dates[0].format("YYYY-MM-DD"), "新的数据");
      // ## 重构数据
      const newTime = form.getFieldValue("table").map((tit) => {
        if (Number(tit.key) === nameDate + 1) {
          return {
            ...tit,
            date: [
              moment(dates[0].format("YYYY-MM-DD"), "YYYY-MM-DD"),
              moment(dates[1].format("YYYY-MM-DD"), "YYYY-MM-DD"),
            ],
          };
        } else {
          return { ...tit };
        }
      });
      // ## 将重构的数据应用
      form.setFieldsValue({
        table: newTime,
      });
    }
  };
  return (
    <RangePicker
      value={dates || value}
      disabledDate={disabledDate}
      onCalendarChange={(val) => setDates(val)}
      onChange={(val) => setValue(val)}
      onOpenChange={onOpenChange}
      onBlur={() => console.log("blur has been triggered")}
    />
  );
};
export default Datepicker;