有没有办法将日历日期选择器中所选日期绑定到另一个文件可以访问的变量？

发布于 2025-01-19 13:53:05 字数 525 浏览 2 评论 0原文

我正在开发一个 React 应用程序，目前有一个日期选择器可以使用 Ant Design 选择日期范围。我想将所选日期的值存储到一个变量中，该变量可以由程序中的另一个文件访问。如何将选定的值绑定到变量中？以下是我的日期选择器的 JavaScript 代码：

 <p>Select a date range: </p>
              </div>
              <div className="left">
              <Space direction="vertical" size={12}>
                <RangePicker
                  format="YYYY-MM-DD"
                  onChange={this.onChange}
                  onOk={onOk}
                />
              </Space>

原文

I am working on a React application and currently have a date picker to select a date range using Ant Design. I want to store the value of the selected date into a variable that can be accessed by another file in my program. How can I bind the selected value into a variable? Here is the JavaScript code for my date picker:

 <p>Select a date range: </p>
              </div>
              <div className="left">
              <Space direction="vertical" size={12}>
                <RangePicker
                  format="YYYY-MM-DD"
                  onChange={this.onChange}
                  onOk={onOk}
                />
              </Space>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

拍不死你 2025-01-26 13:53:05

检查以下示例，您可以在选择日期后将日期值存储在变量中，并调用onChange函数。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, Space } from 'antd';
import 'antd/dist/antd.css';
import './index.css';

const { RangePicker } = DatePicker;

const Demo = () => {
  let selecteddate;
  let selectedstartdate;
  let selectedenddate;

  const onChange = (value) => {
    selecteddate = value;
    selectedstartdate = value[0];
    selectedenddate = value[1];

    //Pass the following values
     console.log("selecteddate:",selecteddate);
     console.log("selectedstartdate:",selectedstartdate);
     console.log("selectedenddate:",selectedenddate);
  };

  return (
    <>
      <p>Select a date range: </p>
      <Space direction="vertical" size={12}>
        <RangePicker format="YYYY-MM-DD" onChange={onChange} />
      </Space>
    </>
  );
};

export default Demo

screenshot

Check the following example, You can store the date values in a variable once the date is selected and onChange function is called.

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, Space } from 'antd';
import 'antd/dist/antd.css';
import './index.css';

const { RangePicker } = DatePicker;

const Demo = () => {
  let selecteddate;
  let selectedstartdate;
  let selectedenddate;

  const onChange = (value) => {
    selecteddate = value;
    selectedstartdate = value[0];
    selectedenddate = value[1];

    //Pass the following values
     console.log("selecteddate:",selecteddate);
     console.log("selectedstartdate:",selectedstartdate);
     console.log("selectedenddate:",selectedenddate);
  };

  return (
    <>
      <p>Select a date range: </p>
      <Space direction="vertical" size={12}>
        <RangePicker format="YYYY-MM-DD" onChange={onChange} />
      </Space>
    </>
  );
};

export default Demo

Screenshot