jobiqo-cl/lib/es/src/components/02-atoms/01-forms/06-date/single/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

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 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 single date picker is used for single value
 * dates like a birthdate or a reminder date. Use the "min and max values" prop
 * to allow any date value to be inserted (including past dates).
 */
const SingleDatePopup = (_a) => {
    var { id = 'date', placeholder = 'Date', initialDate = new Date(), onDateChange, label, displayFormat = 'dd/MM/yyyy', showTimeSelect = false, timeFormat = 'HH:mm', timeIntervals = 15, timeCaption = 'Time', minDate, maxDate, readOnly = false, disabledKeyboardNavigation } = _a, props = __rest(_a, ["id", "placeholder", "initialDate", "onDateChange", "label", "displayFormat", "showTimeSelect", "timeFormat", "timeIntervals", "timeCaption", "minDate", "maxDate", "readOnly", "disabledKeyboardNavigation"]);
    const [date, setDate] = useState(initialDate);
    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: id, selected: date, placeholderText: placeholder, monthsShown: months, dateFormat: displayFormat, readOnly: readOnly, onChange: changedDate => {
                onDateChange(changedDate);
                setDate(changedDate);
            } }, (minDate ? { minDate } : null), (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: id }, label),
        datePicker));
};

export { SingleDatePopup };