feat(daterange): add date range with two dates

src/components/DateField.js

@@ -1,11 +1,11 @@
-import React, {Component} from 'react';
+import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {ControlLabel, FormControl, FormGroup} from 'react-bootstrap';
 import DatePicker from 'react-datepicker';
 
 import ValidatorService from '../services/validator';
 
-class DateField extends Component {
+class DateField extends PureComponent {
     static propTypes = {
         control: PropTypes.string.isRequired,
         label: PropTypes.string.isRequired,

src/components/DateRange.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Col, Row} from 'react-bootstrap';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faInfoCircle} from '@fortawesome/free-solid-svg-icons';
+import moment from 'moment';
+
+import DateUtilsService from '../services/dateUtils';
+import DateField from './DateField';
+
+const handleChangeDateFrom = (value, dateTo, range, onChange) => {
+    const dateFrom = value || null;
+    onChange({dateFrom, dateTo: DateUtilsService.getDateTo(dateFrom, dateTo, range)});
+};
+
+const DateRange = ({
+    dateFrom, dateTo, range, onChange
+}) => (
+    <Row>
+        <Col sm={6} className="no-padding">
+            <DateField
+                control="dateFrom"
+                label="Desde"
+                value={dateFrom}
+                minDate={DateUtilsService.MIN_DATE_FROM}
+                maxDate={DateUtilsService.MAX_DATE_FROM}
+                onChange={item => handleChangeDateFrom(item.target.value, dateTo, range, onChange)}
+            />
+        </Col>
+        <Col sm={6} className="no-padding">
+            <DateField
+                control="dateTo"
+                label={(
+                    <span title={`El rango de fechas no puede superar los ${range} días.`}>
+                        Hasta&nbsp;
+                        <FontAwesomeIcon icon={faInfoCircle}/>
+                        &nbsp;
+                    </span>
+                )}
+                value={dateTo}
+                minDate={moment(dateFrom)}
+                maxDate={DateUtilsService.getMaxDateTo(dateFrom, range)}
+                onChange={item => onChange({dateTo: item.target.value ? item.target.value : null})}
+            />
+        </Col>
+    </Row>
+);
+
+DateRange.propTypes = {
+    onChange: PropTypes.func.isRequired,
+    dateFrom: PropTypes.string.isRequired,
+    dateTo: PropTypes.string.isRequired,
+    range: PropTypes.number
+};
+
+DateRange.defaultProps = {
+    range: 45
+};
+
+export default DateRange;

src/services/dateUtils.js

@@ -1,8 +1,11 @@
 import {isDate} from 'lodash';
+import moment from 'moment';
 import 'moment/locale/es';
 
 export default class DateUtilsService {
     static LOCALE = 'es-AR';
+    static MIN_DATE_FROM = moment('2018-04-01');
+    static MAX_DATE_FROM = moment();
 
     static formatDate(input) {
         if (!input) {
@@ -23,4 +26,24 @@ export default class DateUtilsService {
     static formatDateTime(input) {
         return `${DateUtilsService.formatDate(input)} ${DateUtilsService.formatTime(input)}`;
     }
+
+    static getDateTo(dateFrom, dateTo, range) {
+        const from = moment(dateFrom);
+        const to = moment(dateTo);
+        return DateUtilsService.formatISODate(
+            from > to ? from : moment.min(DateUtilsService.getMaxDateTo(dateFrom, range), to)
+        );
+    }
+
+    static formatISODate(input) {
+        if (!input) {
+            return null;
+        }
+        const date = moment(input);
+        return date.toISOString().substring(0, 10);
+    }
+
+    static getMaxDateTo(dateFrom, range) {
+        return moment.min(moment(dateFrom).add(range, 'days'), moment());
+    }
 }