如何在React日期范围选择器中获取开始和结束日期值？ [英] How to get start and end date value in React date range picker?

问题描述

在我的代码中，我使用了日期范围选择器中的一个npm反应组件（ https://www.npmjs.com/package/react-date-range ）。在我的屏幕上，我有一个申请日期按钮。如果我点击该按钮，我想打印日期范围值。如何获取该范围值onclick？

In my code I've used one of the npm react components for date range picker (https://www.npmjs.com/package/react-date-range). In my screen I've an apply dates button. If i click that button i want to print date range value. How to get that range value onclick?

    var Calendarcomponent = React.createClass({
    getInitialState: function(){
        this.state = {
          'rangePicker' : {},
          'linked' : {},
          'datePicker' : null,
          'firstDayOfWeek' : null,
          'predefined' : {},
        }
    }
  handleSelect:function(range){
    console.log(range);
  },
  handleClick:function(range){
    console.log(range);
  },
  render:function(){
    var rangePicker = this.state;
    var format = 'dddd, D MMMM YYYY';
      return (
        <div>
            <h4>FILTER BY DATE</h4>
            <div className="date-range text-center">
                <div className="group">      
<label>Date range</label>
                    <input className="inputMaterial" type="text" value={ rangePicker['endDate'] && rangePicker['endDate'].format(format).toString() } required />
                </div>
            </div>
            <div className="set-borrow-dates">
              <div id="select-date">Select Borrow date</div>
              <DateRange onInit={this.handleSelect} onclick={this.handleClick} />
              <button id="apply-dates"><i className="fa fa-check-circle"></i> Apply Dates</button>
            </div>
        </div>
      )
  }
});

推荐答案

您可以使用 onChange 回调以将范围存储在状态，并在单击按钮时读取它：

You can use the onChange callback to store the range in state and read it when clicking the button:

handleSelect(range){
  this.setState({ range });
},

handleClick(){
  console.log(this.state.range);
},

render:function(){
  return <div>
    <DateRange onInit={this.handleSelect}
     onChange={this.handleSelect} />
    <button id="apply-dates" onClick={this.handleClick} >
      <i className="fa fa-check-circle"></i>
      Apply Dates
    </button>
  </div>;
}

这篇关于如何在React日期范围选择器中获取开始和结束日期值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！