jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
54 lines (51 loc) • 3.74 kB
JavaScript
import { __rest } from '../../../../../../node_modules/tslib/tslib.es6.js';
import React__default, { useState, useEffect } from 'react';
import { FormItem, FormLabel } from '../../11-form-item/index.js';
import addDays from '../../../../../../node_modules/date-fns/esm/addDays/index.js';
import DatePicker from '../../../../../../node_modules/react-datepicker/es/index.js';
import { datePickerGlobalStyles, DateWrapper } from '../styles.js';
const DatePickerGlobalStyles = datePickerGlobalStyles();
/**
* A date popup can be used inside forms or filters in order to make it easier to choose a date. The range date picker is used
* for multiple value dates like a start and end of education item or work experience. Use the "min and max dates" prop
* to allow any date value to be inserted (including past dates).
*/
const RangeDatePopup = (_a) => {
var { startDateId = 'start_date', endDateId = 'end_date', initialStartDate = new Date(), initialEndDate = addDays(new Date(), 2), label, startDateAriaLabel, endDateAriaLabel, startDatePlaceholderText = 'Start date', endDatePlaceholderText = 'End date', onDatesChange, displayFormat = 'dd/MM/yyyy', minDate, maxDate, showTimeSelect = false, timeFormat = 'HH:mm', timeIntervals = 15, timeCaption = 'Time', readOnly = false, disabledKeyboardNavigation } = _a, props = __rest(_a, ["startDateId", "endDateId", "initialStartDate", "initialEndDate", "label", "startDateAriaLabel", "endDateAriaLabel", "startDatePlaceholderText", "endDatePlaceholderText", "onDatesChange", "displayFormat", "minDate", "maxDate", "showTimeSelect", "timeFormat", "timeIntervals", "timeCaption", "readOnly", "disabledKeyboardNavigation"]);
const [startDate, setStartDate] = useState(initialStartDate);
const [endDate, setEndDate] = useState(initialEndDate);
const [months, setMonths] = useState(1);
// Update number of months shown when window is small.
useEffect(() => {
if (window.matchMedia('(max-width: 800px)').matches) {
setMonths(1);
}
});
const datePicker = (React__default.createElement(DateWrapper, null,
React__default.createElement(DatePickerGlobalStyles, null),
React__default.createElement(DatePicker, Object.assign({ id: startDateId, selected: startDate, onChange: date => {
setStartDate(date);
onDatesChange({
startDate: date,
endDate
});
}, selectsStart: true, dateFormat: displayFormat, monthsShown: months, startDate: startDate, endDate: endDate, readOnly: readOnly }, (minDate ? { minDate } : null), (maxDate ? { maxDate } : null), (showTimeSelect
? { showTimeSelect, timeFormat, timeCaption, timeIntervals }
: null), { disabledKeyboardNavigation: disabledKeyboardNavigation }, props)),
React__default.createElement(DatePicker, Object.assign({ id: endDateId, selected: endDate, onChange: date => {
setEndDate(date);
onDatesChange({
startDate,
endDate: date
});
}, monthsShown: months, selectsEnd: true, dateFormat: displayFormat, endDate: endDate, minDate: startDate, readOnly: readOnly }, (maxDate ? { maxDate } : null), (showTimeSelect
? { showTimeSelect, timeFormat, timeCaption, timeIntervals }
: null), { disabledKeyboardNavigation: disabledKeyboardNavigation }, props))));
if (!label) {
return datePicker;
}
return (React__default.createElement(FormItem, null,
React__default.createElement(FormLabel, { htmlFor: startDateId }, label),
datePicker));
};
export { RangeDatePopup };