reactstrap-date-picker
Version:
Reactstrap based, zero dependencies, date picker
192 lines (184 loc) • 8.22 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useInputValues = void 0;
var _react = require("react");
var _getDateFromIsoString = require("../util/getDateFromIsoString");
var _getIsoStringFromDate = require("../util/getIsoStringFromDate");
var _makeInputValueString = (date, separator, dateFormat) => {
var month = date.getMonth() + 1;
var day = date.getDate();
if (dateFormat.match(/MM.DD.YYYY/)) {
return (month > 9 ? month : "0".concat(month)) + separator + (day > 9 ? day : "0".concat(day)) + separator + date.getFullYear();
} else if (dateFormat.match(/DD.MM.YYYY/)) {
return (day > 9 ? day : "0".concat(day)) + separator + (month > 9 ? month : "0".concat(month)) + separator + date.getFullYear();
} else {
return date.getFullYear() + separator + (month > 9 ? month : "0".concat(month)) + separator + (day > 9 ? day : "0".concat(day));
}
};
var useInputValues = (controlInputRef, value, defaultValue, minDate, maxDate, dateFormat, onClear, onChange) => {
var [separator, setSeparator] = (0, _react.useState)(dateFormat.match(/[^A-Z]/)[0]);
var [innerValue, setInnerValue] = (0, _react.useState)(null);
var [inputValue, setInputValue] = (0, _react.useState)(null);
var [displayDate, setDisplayDate] = (0, _react.useState)(null);
var [selectedDate, setSelectedDate] = (0, _react.useState)(null);
// handle props changes
(0, _react.useEffect)(() => {
setSeparator(dateFormat.match(/[^A-Z]/)[0]);
}, [dateFormat]);
// handle input values
(0, _react.useEffect)(() => {
var isoString = value || defaultValue;
var minDate = (0, _getDateFromIsoString.getDateFromIsoString)(minDate);
var maxDate = (0, _getDateFromIsoString.getDateFromIsoString)(maxDate);
var nSelectedDate = (0, _getDateFromIsoString.getDateFromIsoString)(isoString);
var nInnerValue = (0, _getIsoStringFromDate.getIsoStringFromDate)(nSelectedDate);
var nInputValue = isoString ? _makeInputValueString(nSelectedDate, separator, dateFormat) : null;
var nDisplayDate;
if (nSelectedDate) {
//nDisplayDate = new Date(nSelectedDate)
nDisplayDate = nSelectedDate;
} else {
var today = (0, _getDateFromIsoString.getDateFromIsoString)(new Date().toISOString());
if (minDate && Date.parse(minDate) >= Date.parse(today)) {
nDisplayDate = minDate;
} else if (maxDate && Date.parse(maxDate) <= Date.parse(today)) {
nDisplayDate = maxDate;
} else {
nDisplayDate = today;
}
}
setInnerValue(nInnerValue);
setInputValue(nInputValue);
setSelectedDate(nSelectedDate);
setDisplayDate(nDisplayDate);
}, [value, defaultValue, minDate, maxDate, separator, dateFormat]);
//
var handleClear = /*useCallback(*/() => {
if (onClear) {
onClear();
} else {
setInnerValue(null);
setInputValue(null);
setSelectedDate(null);
setDisplayDate(null);
if (onChange) {
onChange(null, null);
}
}
}; /*, [onClear, onChange])*/
var handleBadInput = /*useCallback(*/function handleBadInput(originalValue) {
var tail = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var parts = originalValue.replace(new RegExp("[^0-9".concat(separator, "]")), '').split(separator);
if (dateFormat.match(/MM.DD.YYYY/) || dateFormat.match(/DD.MM.YYYY/)) {
if (parts[0] && parts[0].length > 2) {
parts[1] = parts[0].slice(2) + (parts[1] || '');
parts[0] = parts[0].slice(0, 2);
}
if (parts[1] && parts[1].length > 2) {
parts[2] = parts[1].slice(2) + (parts[2] || '');
parts[1] = parts[1].slice(0, 2);
}
if (parts[2]) {
parts[2] = parts[2].slice(0, 4);
if (tail) {
if (parts[2].length < 4) {
parts[2] = parts[2].padEnd(4, '0');
}
}
}
} else {
if (parts[0] && parts[0].length > 4) {
parts[1] = parts[0].slice(4) + (parts[1] || '');
parts[0] = parts[0].slice(0, 4);
}
if (parts[1] && parts[1].length > 2) {
parts[2] = parts[1].slice(2) + (parts[2] || '');
parts[1] = parts[1].slice(0, 2);
}
if (parts[2]) {
parts[2] = parts[2].slice(0, 2);
}
}
var nInputValue = parts.join(separator);
setInputValue(nInputValue);
}; /*, [dateFormat, separator])*/
var handleBadInputOnBlur = () => {
var _controlInputRef$curr;
var originalValue = (controlInputRef === null || controlInputRef === void 0 || (_controlInputRef$curr = controlInputRef.current) === null || _controlInputRef$curr === void 0 ? void 0 : _controlInputRef$curr.value) || '';
if (originalValue) {
handleBadInput(originalValue, true);
}
};
var handleInputChange = /*useCallback(*/() => {
var _controlInputRef$curr2;
var originalValue = (controlInputRef === null || controlInputRef === void 0 || (_controlInputRef$curr2 = controlInputRef.current) === null || _controlInputRef$curr2 === void 0 ? void 0 : _controlInputRef$curr2.value) || '';
var nInputValue = originalValue.replace(/(-|\/\/)/g, separator).slice(0, 10);
if (!nInputValue) {
handleClear();
return;
}
var month, day, year;
if (dateFormat.match(/MM.DD.YYYY/)) {
if (!nInputValue.match(/[0-1][0-9].[0-3][0-9].[1-2][0-9][0-9][0-9]/)) {
return handleBadInput(originalValue);
}
month = nInputValue.slice(0, 2).replace(/[^0-9]/g, '');
day = nInputValue.slice(3, 5).replace(/[^0-9]/g, '');
year = nInputValue.slice(6, 10).replace(/[^0-9]/g, '');
} else if (dateFormat.match(/DD.MM.YYYY/)) {
if (!nInputValue.match(/[0-3][0-9].[0-1][0-9].[1-2][0-9][0-9][0-9]/)) {
return handleBadInput(originalValue);
}
day = nInputValue.slice(0, 2).replace(/[^0-9]/g, '');
month = nInputValue.slice(3, 5).replace(/[^0-9]/g, '');
year = nInputValue.slice(6, 10).replace(/[^0-9]/g, '');
} else {
if (!nInputValue.match(/[1-2][0-9][0-9][0-9].[0-1][0-9].[0-3][0-9]/)) {
return handleBadInput(originalValue);
}
year = nInputValue.slice(0, 4).replace(/[^0-9]/g, '');
month = nInputValue.slice(5, 7).replace(/[^0-9]/g, '');
day = nInputValue.slice(8, 10).replace(/[^0-9]/g, '');
}
var monthInteger = parseInt(month, 10);
var dayInteger = parseInt(day, 10);
var yearInteger = parseInt(year, 10);
if (monthInteger > 12 || dayInteger > 31) {
return handleBadInput(originalValue);
}
var beforeMinDate = minDate && Date.parse(originalValue) < Date.parse(minDate);
var afterMaxDate = maxDate && Date.parse(originalValue) > Date.parse(maxDate);
if (beforeMinDate || afterMaxDate) {
return handleBadInput(originalValue);
}
if (!isNaN(monthInteger) && !isNaN(dayInteger) && !isNaN(yearInteger) && monthInteger <= 12 && dayInteger <= 31 && yearInteger > 999) {
var nSelectedDate = (0, _getDateFromIsoString.getDateFromIsoString)(new Date(yearInteger, monthInteger - 1, dayInteger, 12, 0, 0, 0).toISOString());
var nInnerValue = (0, _getIsoStringFromDate.getIsoStringFromDate)(nSelectedDate);
setSelectedDate(nSelectedDate);
setDisplayDate(nSelectedDate);
setInnerValue(nInnerValue);
if (onChange) {
onChange(nInnerValue, nInputValue);
}
}
setInputValue(nInputValue);
}; /*, [controlInputRef, separator, onChange, minDate, maxDate])*/
var handleChangeMonth = nDisplayDate => {
setDisplayDate(nDisplayDate);
};
var handleChangeDate = /*useCallback(*/nSelectedDate => {
var nInnerValue = (0, _getIsoStringFromDate.getIsoStringFromDate)(nSelectedDate);
var nInputValue = _makeInputValueString(nSelectedDate, separator, dateFormat);
setInputValue(nInputValue);
setSelectedDate(nSelectedDate);
setDisplayDate(nSelectedDate);
setInnerValue(nInnerValue);
if (onChange) {
onChange(nInnerValue, nInputValue);
}
}; /*, [separator, dateFormat, onChange])*/
return [innerValue, inputValue, displayDate, selectedDate, handleClear, handleInputChange, handleChangeMonth, handleChangeDate, handleBadInputOnBlur];
};
exports.useInputValues = useInputValues;