date-picker-modal/dist/DatePickerModal.js

A React date picker modal for selecting dates with a Persian calendar

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import styles from "./DatePickerModal.module.css"; // تغییر نام فایل CSS به DatePickerModal
var months = [
    "فروردین",
    "اردیبهشت",
    "خرداد",
    "تیر",
    "مرداد",
    "شهریور",
    "مهر",
    "آبان",
    "آذر",
    "دی",
    "بهمن",
    "اسفند",
];
var DatePickerModal = function (_a) {
    var isOpen = _a.isOpen, onClose = _a.onClose, onSelectDate = _a.onSelectDate;
    var _b = useState(5), selectedDay = _b[0], setSelectedDay = _b[1];
    var _c = useState("آذر"), selectedMonth = _c[0], setSelectedMonth = _c[1];
    var _d = useState(1402), selectedYear = _d[0], setSelectedYear = _d[1];
    var handleDayChange = function (direction) {
        if (direction === "up") {
            setSelectedDay(function (prev) { return (prev < 31 ? prev + 1 : 1); });
        }
        else {
            setSelectedDay(function (prev) { return (prev > 1 ? prev - 1 : 31); });
        }
    };
    var handleMonthChange = function (direction) {
        var currentIndex = months.indexOf(selectedMonth);
        if (direction === "up") {
            setSelectedMonth(months[(currentIndex + 1) % months.length]);
        }
        else {
            setSelectedMonth(months[(currentIndex - 1 + months.length) % months.length]);
        }
    };
    var handleYearChange = function (direction) {
        if (direction === "up") {
            setSelectedYear(function (prev) { return prev + 1; });
        }
        else {
            setSelectedYear(function (prev) { return prev - 1; });
        }
    };
    var handleConfirm = function () {
        var monthNumber = months.indexOf(selectedMonth) + 1; // تبدیل نام ماه به عدد
        var formattedDate = "".concat(selectedYear, "/").concat(monthNumber, "/").concat(selectedDay);
        onSelectDate(formattedDate);
        onClose();
    };
    if (!isOpen)
        return null;
    return (_jsx("div", { className: styles.modalOverlay, children: _jsxs("div", { className: styles.modalContent, children: [_jsxs("div", { className: styles.modalHeader, children: [_jsx("button", { className: styles.closeButton, onClick: onClose, children: "\u00D7" }), _jsx("h2", { className: styles.modalTitle, children: "\u062A\u0627\u0631\u06CC\u062E \u062A\u0648\u0644\u062F" })] }), _jsx("div", { className: styles.divider }), _jsxs("div", { className: styles.dateSelector, children: [_jsxs("div", { className: styles.column, children: [_jsx("div", { className: styles.dateItem, onClick: function () { return handleYearChange("up"); }, children: selectedYear + 1 }), _jsx("div", { className: styles.line }), _jsx("div", { className: "".concat(styles.dateItem, " ").concat(styles.active), children: selectedYear }), _jsx("div", { className: styles.line }), _jsx("div", { className: styles.dateItem, onClick: function () { return handleYearChange("down"); }, children: selectedYear - 1 })] }), _jsx("div", { className: styles.dividerVertical }), _jsxs("div", { className: styles.column, children: [_jsx("div", { className: styles.dateItem, onClick: function () { return handleMonthChange("up"); }, children: months[(months.indexOf(selectedMonth) + 1) % months.length] }), _jsx("div", { className: styles.line }), _jsx("div", { className: "".concat(styles.dateItem, " ").concat(styles.active), children: selectedMonth }), _jsx("div", { className: styles.line }), _jsx("div", { className: styles.dateItem, onClick: function () { return handleMonthChange("down"); }, children: months[(months.indexOf(selectedMonth) - 1 + months.length) %
                                        months.length] })] }), _jsx("div", { className: styles.dividerVertical }), _jsxs("div", { className: styles.column, children: [_jsx("div", { className: styles.dateItem, onClick: function () { return handleDayChange("up"); }, children: selectedDay < 31 ? selectedDay + 1 : 1 }), _jsx("div", { className: styles.line }), _jsx("div", { className: "".concat(styles.dateItem, " ").concat(styles.active), children: selectedDay }), _jsx("div", { className: styles.line }), _jsx("div", { className: styles.dateItem, onClick: function () { return handleDayChange("down"); }, children: selectedDay > 1 ? selectedDay - 1 : 31 })] })] }), _jsx("button", { className: styles.confirmButton, onClick: handleConfirm, children: "\u062B\u0628\u062A \u062A\u0627\u0631\u06CC\u062E \u062A\u0648\u0644\u062F" })] }) }));
};
export default DatePickerModal;