shlink-web-client/src/utils/DateRangeRow.js
2020-01-14 20:12:30 +01:00

40 lines
1.1 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import DateInput from './DateInput';
import './DateRangeRow.scss';
const dateType = PropTypes.oneOfType([ PropTypes.string, PropTypes.object ]);
const propTypes = {
startDate: dateType,
endDate: dateType,
onStartDateChange: PropTypes.func.isRequired,
onEndDateChange: PropTypes.func.isRequired,
};
const DateRangeRow = ({ startDate, endDate, onStartDateChange, onEndDateChange }) => (
<div className="row">
<div className="col-xl-3 col-lg-4 col-md-6 offset-xl-6 offset-lg-4">
<DateInput
selected={startDate}
placeholderText="Since"
isClearable
maxDate={endDate}
onChange={onStartDateChange}
/>
</div>
<div className="col-xl-3 col-lg-4 col-md-6">
<DateInput
className="date-range-row__date-input"
selected={endDate}
placeholderText="Until"
isClearable
minDate={startDate}
onChange={onEndDateChange}
/>
</div>
</div>
);
DateRangeRow.propTypes = propTypes;
export default DateRangeRow;