Javascript 如何将选择值从日历传递到输入

我正在使用一个日期选择器组件，来自Antd库，它在后台运行MomentJS来实现日期/时间功能，作为一个更大的调度组件的一部分

我已经在我的组件中创建了第二个设置为禁用的输入元素。这是为了使输入是只读的。我正在尝试将从日历中选择的任何日期的值以以下格式传递到该输入字段：2019年9月7日

有没有办法在组件级别实现这一点

我的组件

---

为此，应使用状态跟踪值

您可以使用定义类组件的传统方法&setState，也可以使用hook

至于构建日期字符串，有一些本地JS方法可以帮助您完成这一任务！Date.toLocaleDateString

我建议在这里查看“日期”文档：

这里有一个指向所提供示例的CodeSandbox链接！

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { DatePicker, Row, Col } from "antd";

function onChange(value, dateString) {
  console.log("Selected Time: ", value);
  console.log("Formatted Selected Time: ", dateString);
}

function onOk(value) {
  console.log("onOk: ", value);
}

ReactDOM.render(
  <div>
    <Row>
      <Col span={8}>
        <DatePicker
          open
          className="my-class"
          onChange={onChange}
          onOk={onOk}
          format="MMMM"
        />
      </Col>
      <Col span={2} offset={6}>
        <input value="7/09/2019" disabled />
      </Col>
    </Row>
  </div>,
  document.getElementById("container")
);

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { DatePicker, Row, Col } from "antd";

const DatePickerExample = () => {
  const [date, setDate] = useState(new Date().toLocaleDateString("en-US"));

  return (
    <div>
      <Row>
        <Col span={8}>
          <DatePicker
            open
            className="my-class"
            onChange={value =>
              setDate(new Date(value).toLocaleDateString("en-US"))
            }
            onOk={value => setDate(new Date(value).toLocaleDateString("en-US"))}
            format="MMMM"
          />
        </Col>
        <Col span={2} offset={6}>
          <input value={date} disabled />
        </Col>
      </Row>
    </div>
  );
};

ReactDOM.render(<DatePickerExample />, document.getElementById("container"));