@shinyongjun/react-datepicker
Version:
DatePicker component in React App.
60 lines • 4.13 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = RangePickerMonth;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var core_1 = require("../../constants/core");
var datetime_1 = require("../../utils/datetime");
function RangePickerMonth(_a) {
var type = _a.type, // start | end
value = _a.value, pairValue = _a.pairValue, onChange = _a.onChange, monthPage = _a.monthPage, weekdayLabels = _a.weekdayLabels, timeValue = _a.timeValue, holidays = _a.holidays;
var year = Math.ceil(monthPage / 12);
var month = monthPage % 12 || 12;
var firstDay = new Date(year, month - 1, 1).getDay(); // 이달 1일의 요일
var lastDateValue = new Date(year, month, 0); // 이달 말 일의 Date 객체
var lastDate = lastDateValue.getDate(); // 이달 말 일
var lastDay = lastDateValue.getDay(); // 이달 말 일의 요일
var prevLastDate = new Date(year, month - 1, 0).getDate(); // 이전달의 말 일
var defaultFormat = 'YYYY-MM-DD';
var startValue = (0, react_1.useMemo)(function () { return (type === 'start' ? value : pairValue); }, [value, pairValue, type]);
var endValue = (0, react_1.useMemo)(function () { return (type === 'end' ? value : pairValue); }, [value, pairValue, type]);
var formatedDateValue = (0, react_1.useMemo)(function () { return (0, datetime_1.formatDate)(value, defaultFormat); }, [value]);
var formatedStartValue = (0, react_1.useMemo)(function () {
return type === 'start'
? (0, datetime_1.formatDate)(value, defaultFormat)
: (0, datetime_1.formatDate)(pairValue, defaultFormat);
}, [value, pairValue, type]);
var formatedEndValue = (0, react_1.useMemo)(function () {
return type === 'end'
? (0, datetime_1.formatDate)(value, defaultFormat)
: (0, datetime_1.formatDate)(pairValue, defaultFormat);
}, [value, pairValue, type]);
var renderDateButton = function (month, date, classNameModifier) {
if (classNameModifier === void 0) { classNameModifier = ''; }
var buttonDate = new Date(-1, month, date, timeValue.hour, timeValue.minute, timeValue.second);
var day = buttonDate.getDay();
var formatedThisValue = (0, datetime_1.formatDate)(buttonDate, defaultFormat);
var isHoliday = (0, datetime_1.checkHoliday)(formatedThisValue, holidays);
var handleClick = function () {
if (onChange) {
onChange(buttonDate);
}
};
return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "".concat(core_1.NAME_SPACE, "__datepicker-button ").concat(classNameModifier), title: formatedThisValue, "data-day": day, "data-active": formatedDateValue === formatedThisValue, "data-start-active": formatedStartValue === formatedThisValue, "data-end-active": formatedEndValue === formatedThisValue, "data-range-active": startValue &&
endValue &&
buttonDate > startValue &&
buttonDate < endValue, "data-holiday": isHoliday, onClick: handleClick, children: date }, date));
};
return ((0, jsx_runtime_1.jsxs)("div", { className: "".concat(core_1.NAME_SPACE, "__month-view"), children: [weekdayLabels.map(function (day, index) { return ((0, jsx_runtime_1.jsx)("div", { className: "".concat(core_1.NAME_SPACE, "__weekday"), "data-day": index, children: day }, day)); }), Array.apply(0, Array(firstDay)).map(function (x, i) {
var date = prevLastDate - (firstDay - i - 1);
return renderDateButton(monthPage + 22, date, "".concat(core_1.NAME_SPACE, "__neighbor-button"));
}), Array.apply(0, Array(lastDate)).map(function (x, i) {
var date = i + 1;
return renderDateButton(monthPage + 23, date);
}), Array.apply(0, Array(6 - lastDay)).map(function (x, i) {
var date = i + 1;
return renderDateButton(monthPage + 24, date, "".concat(core_1.NAME_SPACE, "__neighbor-button"));
})] }));
}
//# sourceMappingURL=Month.js.map