react-jalali-picker
Version:
A React component library for selecting dates, featuring both a DatePicker and a RangePicker that support Jalali (Persian) and Gregorian calendars.
125 lines (124 loc) • 7.35 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var dayjs_1 = __importDefault(require("dayjs"));
var jalali_plugin_dayjs_1 = __importDefault(require("jalali-plugin-dayjs"));
var localeData_1 = __importDefault(require("dayjs/plugin/localeData"));
var clsx_1 = __importDefault(require("clsx"));
dayjs_1.default.extend(localeData_1.default);
dayjs_1.default.extend(jalali_plugin_dayjs_1.default);
var RangePicker = function (_a) {
var _b = _a.value, startDate = _b.start, endDate = _b.end, onChange = _a.onChange, _c = _a.locale, locale = _c === void 0 ? "fa" : _c, _d = _a.calendarType, calendarType = _d === void 0 ? "jalali" : _d, _e = _a.direction, direction = _e === void 0 ? "rtl" : _e;
var _f = (0, react_1.useState)((0, dayjs_1.default)((0, dayjs_1.default)().locale(locale).calendar(calendarType))), currentMonth = _f[0], setCurrentMonth = _f[1];
var getWeekdays = (function () {
var localizedDayjs = (0, dayjs_1.default)().locale(locale);
var localeData = localizedDayjs.localeData();
var weekdaysMin = localeData.weekdaysMin();
var firstDayOfWeek = localeData.firstDayOfWeek();
var orderedWeekdays = [];
for (var i = 0; i < 7; i++) {
orderedWeekdays.push(weekdaysMin[(i + firstDayOfWeek) % 7]);
}
return orderedWeekdays;
})();
var handleDayClick = function (day, month) {
var selectedDate = month.date(day);
if (!startDate || (startDate && endDate)) {
onChange({ start: selectedDate, end: null });
}
else if (selectedDate.isBefore(startDate)) {
onChange({ start: selectedDate, end: endDate });
}
else {
onChange({ start: startDate, end: selectedDate });
}
};
var renderDays = function (month) {
var daysInMonth = month.daysInMonth();
var firstDayOfMonth = locale === "fa"
? (month.startOf("month").day() + 1) % 7
: month.startOf("month").day();
var prevMonth = month.subtract(1, "month");
var nextMonth = month.add(1, "month");
var daysInPrevMonth = prevMonth.daysInMonth();
var daysArray = [];
for (var i = 0; i < firstDayOfMonth; i++) {
var day = daysInPrevMonth - firstDayOfMonth + i + 1;
daysArray.push(react_1.default.createElement("div", { key: "prev-".concat(prevMonth, "-").concat(day), className: "day disabled-day" }, day));
}
for (var day = 1; day <= daysInMonth; day++) {
var date = month.date(day);
var isSelected = (startDate && date.isSame(startDate, "day")) ||
(endDate && date.isSame(endDate, "day"));
var isInRange = startDate &&
endDate &&
date.isAfter(startDate, "day") &&
date.isBefore(endDate, "day");
daysArray.push(react_1.default.createElement("div", { key: day, className: (0, clsx_1.default)("day", { isInRange: isInRange, isSelected: isSelected }), onClick: handleDayClick.bind(null, day, month) }, day));
}
var totalCells = firstDayOfMonth + daysInMonth;
var emptyCellsAfter = 42 - totalCells;
for (var i = 1; i <= emptyCellsAfter; i++) {
daysArray.push(react_1.default.createElement("div", { key: "next-".concat(nextMonth, "-").concat(i), className: "day disabled-day" }, i));
}
return daysArray;
};
var headerBtns = function (next, unit) {
if (next) {
setCurrentMonth(currentMonth.add(1, unit));
}
else {
setCurrentMonth(currentMonth.subtract(1, unit));
}
};
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: (0, clsx_1.default)("react-jalali-range-picker-wrapper", direction) },
react_1.default.createElement("div", { className: "current-month" },
react_1.default.createElement("div", { className: "calendar-header" },
react_1.default.createElement("div", { className: "prv-btns" },
react_1.default.createElement("button", { onClick: headerBtns.bind(null, false, "year") }, "\u2039\u2039"),
react_1.default.createElement("button", { onClick: headerBtns.bind(null, false, "month") }, "\u2039")),
react_1.default.createElement("div", { className: "month-year-header" }, currentMonth.format("MMMM YYYY")),
react_1.default.createElement("div", { className: "next-btns" },
react_1.default.createElement("button", { onClick: headerBtns.bind(null, true, "month") }, "\u203A"),
react_1.default.createElement("button", { onClick: headerBtns.bind(null, true, "year") }, "\u203A\u203A"))),
react_1.default.createElement("div", { className: "calendar-grid" },
getWeekdays.map(function (day) { return (react_1.default.createElement("div", { key: day, className: "day-name" }, day)); }),
renderDays(currentMonth))),
react_1.default.createElement("div", { className: "next-month" },
react_1.default.createElement("div", { className: "calendar-header" },
react_1.default.createElement("div", { className: "month-year-header" }, currentMonth.add(1, "month").format("MMMM YYYY")),
react_1.default.createElement("div", { className: "next-btns" },
react_1.default.createElement("button", { onClick: headerBtns.bind(null, true, "month") }, "\u203A"),
react_1.default.createElement("button", { onClick: headerBtns.bind(null, true, "year") }, "\u203A\u203A"))),
react_1.default.createElement("div", { className: "calendar-grid" },
getWeekdays.map(function (day) { return (react_1.default.createElement("div", { key: day, className: "day-name" }, day)); }),
renderDays(currentMonth.add(1, "month")))))));
};
exports.default = RangePicker;