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

FØund404

已于 2022-12-26 15:18:01 修改

阅读量745

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： javascript react.js 前端

于 2022-12-23 15:12:31 首次发布

本文链接：https://blog.youkuaiyun.com/bl_ack233/article/details/128419995

React 专栏收录该内容

14 篇文章

订阅专栏

这篇博客介绍了如何在Ant Design的表格中集成可编辑的输入框和日期选择器，并实现日期选择的限制。通过示例代码展示了如何在表格单元格中嵌入Form.Item和Datepicker组件，同时利用`disabledDate`属性限制日期范围，确保用户只能选择相差不超过7天的日期。此外，还涵盖了表格数据的初始化和提交表单时的数据处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;