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

我假设您正在使用http://www.daterangepicker.com/

中的daterangepicker

使用库提供的回调方法在用户进行选择时设置状态变量。

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

}

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

1 个答案: