如何在反應中設置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}); 
     }); 
    }); 

}