sccoreui
Version:
ui-sccore
21 lines (20 loc) • 4.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const calendar_1 = require("primereact/calendar");
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
const date_picker_1 = tslib_1.__importDefault(require("../../components/date-picker/date-picker"));
const DatePickerComponent = () => {
const [date, setDate] = (0, react_1.useState)(null);
const [dateValue, setDateValue] = (0, react_1.useState)(null);
const dateUpdated = (e) => {
setDateValue(e.value);
};
const onClearDate = () => {
setDateValue(null);
};
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Date-Picker" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid my-8 mx-8 px-8" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card clo-12 md:col-6 my-8" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { value: date, dateFormat: "M d, yy", clearButtonClassName: "text-gray-700 border-1 border-gray-300", todayButtonClassName: "bg-primary-600 text-white", showButtonBar: true, onChange: (e) => setDate(e.value), placeholder: "Select dates", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "calendar-gray-700" }), showIcon: true, iconPos: "left", className: "w-9rem" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card clo-12 md:col-6 my-8" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { numberOfMonths: 2, value: date, dateFormat: "M d, yy", clearButtonClassName: "text-gray-700 border-1 border-gray-300", todayButtonClassName: "bg-primary-600 text-white", showButtonBar: true, onChange: (e) => setDate(e.value), placeholder: "Select dates", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "calendar-gray-700" }), showIcon: true, iconPos: "left", className: "w-9rem" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card clo-12 md:col-6 my-8" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { numberOfMonths: 2, selectionMode: "range", value: date, dateFormat: "M d, yy", clearButtonClassName: "text-gray-700 border-1 border-gray-300", todayButtonClassName: "bg-primary-600 text-white", showButtonBar: true, onChange: (e) => setDate(e.value), placeholder: "Select dates", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "calendar-gray-700" }), showIcon: true, iconPos: "left", className: "w-9rem" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card clo-12 md:col-6 my-8" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { selectionMode: "range", value: date, dateFormat: "M d, yy", clearButtonClassName: "text-gray-700 border-1 border-gray-300", todayButtonClassName: "bg-primary-600 text-white", showButtonBar: true, onChange: (e) => setDate(e.value), placeholder: "Select dates", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "calendar-gray-700" }), showIcon: true, iconPos: "left", className: "w-9rem" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card clo-12 md:col-6 my-8" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { selectionMode: "range", numberOfMonths: 2, value: date, dateFormat: "M d, yy", clearButtonClassName: "text-gray-700 border-1 border-gray-300", touchUI: true, todayButtonClassName: "bg-primary-600 text-white", showButtonBar: true, onChange: (e) => setDate(e.value), placeholder: "Select dates", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "calendar-gray-700" }), showIcon: true, iconPos: "left", className: "w-9rem" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card clo-12 md:col-6 my-8" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { selectionMode: "range", value: date, dateFormat: "M d, yy", clearButtonClassName: "text-gray-700 border-1 border-gray-300", touchUI: true, todayButtonClassName: "bg-primary-600 text-white", showButtonBar: true, onChange: (e) => setDate(e.value), placeholder: "Select dates", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "calendar-gray-700" }), showIcon: true, iconPos: "left", className: "w-9rem" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex" }, { children: (0, jsx_runtime_1.jsx)(date_picker_1.default, { showIcon: true, maxDate: new Date, value: dateValue, clear: "x-close", iconPos: "left", icon: 'calendar-gray-700', numberOfMonths: 2, dateFormat: 'M d, yy', selectionMode: 'range', placeholder: 'Select a date', onClear: onClearDate, onChange: (e) => dateUpdated(e), className: "w-9rem" }) }))] }))] }));
};
exports.default = DatePickerComponent;