labo-components/app/components/search/DatePickerSelector.jsx

B&G UI components

import React from 'react';
import PropTypes from 'prop-types';

import DatePicker from 'react-datepicker';

import IDUtil from '../../util/IDUtil';
import moment from 'moment';

class DatePickerSelector extends React.Component {
    constructor(props) {
        super(props);
        this.CLASS_PREFIX = 'dps';
        PropTypes.checkPropTypes(DatePickerSelector.propTypes, this.props, 'prop', this.constructor.name);
    }

    getStartDate() {
        if (this.props.dateRange) {
            if (this.props.dateRange.start !== null) {
                return moment(this.props.dateRange.start).format('YYYY-MM-DD');
            }
        }
        return null;
    }

    getEndDate() {
        if (this.props.dateRange) {
            if (this.props.dateRange.end !== null) {
                return moment(this.props.dateRange.end).format('YYYY-MM-DD');
            }
        }
        return null;
    }

    startDateChanged(d) {
       let start = null;
       if (d){
            start = d.getFullYear()+"-"+("0" + (d.getMonth()+1)).slice(-2)+"-"+("0"+d.getDate()).slice(-2);
       }
       this.props.onOutput(this.constructor.name, {
           start : start,
           end: this.getEndDate()
       });
    }

    endDateChanged(d) {
        let end = null;
        if (d){
            end = d.getFullYear()+"-"+("0" + (d.getMonth()+1)).slice(-2)+"-"+("0"+d.getDate()).slice(-2);
        }
        this.props.onOutput(this.constructor.name, {
            start: this.getStartDate(),
            end : end ? end : null
        });
    }

    removeDateFilter = e => {
        switch (e) {
            case 'startDate':
                this.startDateChanged(null);
                break;
            case 'endDate':
                this.endDateChanged(null);
                break;
            default:
                return null;
        }
    };

    removeDateFilterBtn = params => (
        <span
            className="remove-date-filter"
            title={params.title}
            onClick={() => this.removeDateFilter(params.dateToRemove)}>
                    <i className="fas fa-times" />
        </span>
    );

    render() {
        let startDate =  Date.parse(this.getStartDate()) || null;
        let endDate = Date.parse(this.getEndDate()) || null;

        const removeStartBtn = startDate ? this.removeDateFilterBtn({title: "Remove start date", dateToRemove: "startDate" }) : null;
        const removeEndBtn = endDate ? this.removeDateFilterBtn({title: "Remove end date", dateToRemove: "endDate" }) : null;
        const openToDateStart = startDate ? startDate : this.props.minDate;
        const openToDateEnd = endDate ? endDate : this.props.maxDate;

        return (
            <div className={IDUtil.cssClassName('date-picker-selector', this.CLASS_PREFIX)}>
                <DatePicker
                    disabled={this.props.disabled}
                    selected={startDate}
                    selectsStart={true}
                    openToDate={openToDateStart}
                    minDate={this.props.minDate}
                    maxDate={this.props.maxDate}
                    onChange={this.startDateChanged.bind(this)}
                    showMonthDropdown={true}
                    showYearDropdown={true}
                    dropdownMode="select"
                    className="form-control"
                    placeholderText="Start date"
                    dateFormat="dd-MM-yyyy"
                />
                {removeStartBtn}
                to
                <DatePicker
                    disabled={this.props.disabled}
                    selected={endDate}
                    selectsEnd={true}
                    openToDate={openToDateEnd}
                    minDate={this.props.minDate}
                    maxDate={this.props.maxDate}
                    onChange={this.endDateChanged.bind(this)}
                    showMonthDropdown={true}
                    showYearDropdown={true}
                    dropdownMode="select"
                    className="form-control"
                    placeholderText="End date"
                    dateFormat="dd-MM-yyyy"
                />
                {removeEndBtn}
            </div>
        );
    }
}
DatePickerSelector.propTypes = {
    dateRange: PropTypes.shape({
        end: PropTypes.string,
        field: PropTypes.string.isRequired,
        start: PropTypes.string
    }).isRequired,
    disabled: PropTypes.bool,
    maxDate: PropTypes.object,
    minDate: PropTypes.object,
    onOutput: PropTypes.func.isRequired
};
export default DatePickerSelector;