@shinyongjun/react-datepicker
Version:
DatePicker component in React App.
22 lines • 1.91 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { NAME_SPACE } from '../../constants/core';
import { formatDate } from '../../utils/datetime';
export default function RangePickerInput(_a) {
var valueFormat = _a.valueFormat, startValue = _a.startValue, endValue = _a.endValue, setIsVisible = _a.setIsVisible, inputRef = _a.inputRef, isVisible = _a.isVisible, useClearButton = _a.useClearButton, disabled = _a.disabled, onChangeStart = _a.onChangeStart, onChangeEnd = _a.onChangeEnd;
var triggerHandler = function (type) {
if (disabled)
return;
setIsVisible(type);
};
var clearHandler = function () {
if (onChangeStart) {
onChangeStart(null);
}
if (onChangeEnd) {
onChangeEnd(null);
}
};
return (_jsxs("div", { className: "".concat(NAME_SPACE, "__input-container"), ref: inputRef, "aria-disabled": disabled, children: [_jsx("button", { type: "button", className: "".concat(NAME_SPACE, "__input-value"), "data-active": isVisible === 'start', onClick: function () { return triggerHandler('start'); }, disabled: disabled, children: _jsx("span", { className: "".concat(NAME_SPACE, "__input-value-text"), children: formatDate(startValue, valueFormat) }) }), _jsx("div", { className: "".concat(NAME_SPACE, "__input-range-separator"), children: " ~ " }), _jsx("button", { type: "button", className: "".concat(NAME_SPACE, "__input-value"), "data-active": isVisible === 'end', onClick: function () { return triggerHandler('end'); }, disabled: disabled, children: _jsx("span", { className: "".concat(NAME_SPACE, "__input-value-text"), children: formatDate(endValue, valueFormat) }) }), useClearButton && (_jsx("button", { type: "button", className: "".concat(NAME_SPACE, "__clear"), onClick: clearHandler, children: "Clear" }))] }));
}
//# sourceMappingURL=RangePickerInput.js.map