daterangepickerの開始日と終了日の状態を設定する方法

Question

私はdaterangepicker.jsとmoment.jsを使用しています。現在、開始日と終了日の範囲を取得できます。現在の値を設定したいだけです。 SETSTATE変数と、それは誰もがここで私 を助けることができるコンソールでそれを印刷したり、私はどのように行うことができ、それをレンダリングすることは私のコードである

class DaterangePickerComponent extends React.Component 
{ 

    constructor(props) 
    { 
     super(props); 
     this.state = 
     { 
      startDate:null, 
      endDate:null 
     } 
    }; 

    componentDidMount() 
    { 
     $(document).ready(function(){ 
     $("#dp").daterangepicker(
     { timePicker: true, 
      timePickerIncrement: 30, 
      locale: { 
      format: 'MM/DD/YYYY h:mm A' 
      }, 
      ranges: { 
       'Today': [moment(), moment()], 
       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 
       'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
       'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
       'This Month': [moment().startOf('month'), moment().endOf('month')], 
       'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')], 
       'Last 60 Days': [moment().subtract(59, 'days'), moment()], 
       'Last 90 Days': [moment().subtract(89, 'days'), moment()] 
       } 
      }); 
     }); 

    } 

    render() 
    { 
     return (
     <div className="form-group has-feedback"> 
      <div className='input-group add-on col-md-2 date datepicker' data-date-format="yyyy-mm-dd"> 
       <input id="dp" type="text" className="form-control date-picker" data-date-format="yyyy-mm-dd" value="DaterangePicker"/> 
       <span className="input-group-addon"><span className="glyphicon-calendar glyphicon"></span></span> 
      </div>  
     </div> 
     ); 
    } 
} 
window.DaterangePickerComponent = DaterangePickerComponent; 

Answer 1

この

class DaterangePickerComponent extends React.Component 
{ 

    constructor(props) 
    { 
     super(props); 
     this.state = 
     { 
      startDate:null, 
      endDate:null 
     } 
    }; 

    componentDidMount() { 
     this.setState({startDate:moment()}) 
    } 

    render() 
    { 
     return (
     <div className="form-group has-feedback"> 
      <div className='input-group add-on col-md-2 date datepicker' data-date-format="yyyy-mm-dd"> 
       <input id="dp" type="text" className="form-control date-picker" data-date-format="yyyy-mm-dd" value={this.state.startDate}/> 
       <span className="input-group-addon"><span className="glyphicon-calendar glyphicon"></span></span> 
      </div>  
     </div> 
     ); 
    } 
} 
window.DaterangePickerComponent = DaterangePickerComponent; 

Answer 2

を試してみてください私はあなたがdaterangepickerを使用していると仮定しています〜からhttp://www.daterangepicker.com/

ライブラリが提供するコールバックメソッドを使用して、ユーザーが選択したときに状態変数を設定します。

componentDidMount() 
{ 
    var self = this; 
    $(document).ready(function(){ 
     $("#dp").daterangepicker(
     { timePicker: true, 
      timePickerIncrement: 30, 
      locale: { 
      format: 'MM/DD/YYYY h:mm A' 
      }, 
      ranges: { 
       'Today': [moment(), moment()], 
       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 
       'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
       'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
       'This Month': [moment().startOf('month'), moment().endOf('month')], 
       'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')], 
       'Last 60 Days': [moment().subtract(59, 'days'), moment()], 
       'Last 90 Days': [moment().subtract(89, 'days'), moment()] 
      } 
     }, function(start, end, label) { 
      self.setState({start: start, end: end, label: label}); 
     }); 
    }); 

}