Блог

Я включил react-date-range его в свой проект, но он всегда открыт. Я хотел бы открыть его только тогда, когда я нажимаю на диапазон дат и закрываю после выбора обеих дат.

 import React, { Component } from 'react';
import { DateRangePicker } from 'react-date-range';

class ReportForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            startDate: new Date(),
            endDate: new Date()
        };
    }

    handleSelect = (ranges) => {
        console.log(ranges);
        this.setState({
            startDate: ranges.selection.startDate,
            endDate: ranges.selection.endDate
        });
    }

    render() {
        const selectionRange = {
            startDate: this.state.startDate,
            endDate: this.state.endDate,
            key: 'selection',
        };

        return (
            <div className="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2">
                <table className="table table-bordered">
                    <thead>
                        <tr>
                            <th className="text-center">Report</th>
                            <th className="text-center">Period</th>
                            <th className="text-center">Adjust Date</th>
                            <th className="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td align="center">
                                <select className="form-control" id="report">
                                    <option>Report 1</option>
                                    <option>Report 2</option>
                                    <option>Report 3</option>
                                </select>
                            </td>
                            <td align="center">
                                <DateRangePicker
                                    ranges={[selectionRange]}
                                    onChange={this.handleSelect}
                                />
                            </td>
                            <td align="center">
                                <select className="form-control" id="dtOption">
                                    <option>Select</option>
                                    <option>Today</option>
                                    <option>This Month</option>
                                    <option>This Year</option>
                                </select>
                            </td>
                            <td align="center"><button className="btn btn-success">Run Report</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        );
    }
};

export default ReportForm;
 

Вы можете использовать Bootstrap для добавления выпадающего списка, который содержит < DateRangePicker/>