如何在 React js 上获取 DateRangePicker (syncfusion) 的值

Question

我有一个来自 Syncfusion 的日期范围选择器，我安装了这个包并将组件导入到我的 React 项目中。我是 DateRangePicker 的新手，所以我想知道如何获取 DateRangePicker 的值。

这是我的代码

import React from 'react'
import './DateRangePicker.css'
import {DateRangePickerComponent} from '@syncfusion/ej2-react-calendars'

function DateRangePicker(){
    return(
        <>
            <DateRangePickerComponent></DateRangePickerComponent>
        </>
    )
}

export default DateRangePicker

这是输出：

Answer 1

你可以通过传递一个属性来获取DateRangePickerComponent的值：change

function DateRangePicker(){
    const onChange = (props) => {
        const stateDate = props.startDate;
        const endDate = props.endDate;

    };
    return(
        <>
            <DateRangePickerComponent change={onChange} />
        </>
    )
}

Answer 2

按照以下步骤操作。

在组件中创建事件处理程序并使用 change 属性.

syncfusion calendar

然后你可以直接使用事件对象中的text 属性打印配置日期格式的日期。

import { useState } from "react";
import { DateRangePickerComponent } from "@syncfusion/ej2-react-calendars";

import "./styles.css";

const App = () => {
  const [date, updateDate] = useState();

  const onChange = (e) => {
    updateDate(e.text);
  }; // the event handler

  return (
    <div className="container">
      <DateRangePickerComponent change={onChange} />
      <div>Date - {date}</div>
    </div>
  );
};

export default App;

https://codesandbox.io/s/syncfusion-calendar-gc7ks?file=/src/App.js:0-422

Answer 3

通过ref访问组件实例属性，我们可以得到选择的值。参考下面的代码。

function DateRangePicker() {
    function onClick(){
      console.log(dateRangeRef.value)
    }
    let dateRangeRef =  dateRange => dateRangeRef = dateRange;
    return (
      <>
        <DateRangePickerComponent ref={dateRangeRef} />
        <input type="button" value="getSelectedValue" onClick={onClick} />
      </>
    );
  }
  
  render(<DateRangePicker />, document.getElementById('sample'));

请在下面找到示例。

示例 link：https://stackblitz.com/edit/react-hykg6v

API 文档 link：https://ej2.syncfusion.com/react/documentation/api/daterangepicker#value

如何在 React js 上获取 DateRangePicker (syncfusion) 的值

How to get the value of DateRangePicker (syncfusion) on react js

syncfusion

daterangepicker

reactjs