pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
17 lines (16 loc) • 2.02 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Modal } from 'flowbite-react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { useState } from 'react';
import { Button } from '../ui';
const CustomDateRangeModal = ({ isOpen, onClose, onApply }) => {
const [startDate, setStartDate] = useState(new Date().toISOString());
const [endDate, setEndDate] = useState(new Date().toISOString());
const handleApply = () => {
onApply(startDate, endDate);
onClose();
};
return (_jsxs(Modal, { show: isOpen, size: "lg", popup: true, onClose: onClose, children: [_jsx(Modal.Header, { children: "Select Custom Date Range" }), _jsx(Modal.Body, { children: _jsx("div", { className: "flex flex-col space-y-4", children: _jsxs("div", { className: "flex items-center space-x-4", children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("label", { htmlFor: "startDate", className: "mb-1 block text-sm font-medium text-gray-700", children: "Start Date" }), _jsx(DatePicker, { selected: new Date(startDate), onChange: (date) => date && setStartDate(date.toISOString()), showTimeSelect: true, dateFormat: "Pp", placeholderText: "Select start date", className: "rounded-md border border-gray-300 px-3 py-2 shadow-sm" })] }), _jsxs("div", { className: "flex flex-col", children: [_jsx("label", { htmlFor: "endDate", className: "mb-1 block text-sm font-medium text-gray-700", children: "End Date" }), _jsx(DatePicker, { selected: new Date(endDate), onChange: (date) => date && setEndDate(date.toISOString()), showTimeSelect: true, dateFormat: "Pp", placeholderText: "Select end date", className: "rounded-md border border-gray-300 px-3 py-2 shadow-sm" })] })] }) }) }), _jsxs(Modal.Footer, { children: [_jsx(Button, { size: "md", variant: "primary", onClick: handleApply, children: "Apply" }), _jsx(Button, { color: "gray", onClick: onClose, children: "Cancel" })] })] }));
};
export default CustomDateRangeModal;