如何在React中设置daterangepicker的开始日期和结束日期状态

Question

i am using daterangepicker.js and moment.js cuurrently i am able to get the range of start date and end date i just want to set its current value in setstate variable and print it in console or render it how can i do it can anyone help me here is my code

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

I'm assuming that you are using the daterangepicker from http://www.daterangepicker.com/

Use the callback method provided by the library to set state variables when the user makes a selection.

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});
        });
    });

}