@shinyongjun/react-datepicker
Version:
DatePicker component in React App.
52 lines • 3.36 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = DatePickerMonth;
var jsx_runtime_1 = require("react/jsx-runtime");
var core_1 = require("../../constants/core");
var datetime_1 = require("../../utils/datetime");
function DatePickerMonth(_a) {
var value = _a.value, onChange = _a.onChange, valueFormat = _a.valueFormat, monthPage = _a.monthPage, weekdayLabels = _a.weekdayLabels, timeValue = _a.timeValue, holidays = _a.holidays, minDate = _a.minDate, maxDate = _a.maxDate;
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 formatedValue = (0, datetime_1.formatDate)(value, valueFormat);
var renderDateButton = function (month, date, classNameModifier) {
if (classNameModifier === void 0) { classNameModifier = ''; }
var isDisabled = false;
var buttonDate = new Date(-1, month, date, timeValue.hour, timeValue.minute, timeValue.second);
var day = buttonDate.getDay();
var formatedThisValue = (0, datetime_1.formatDate)(buttonDate, valueFormat);
var isHoliday = (0, datetime_1.checkHoliday)(formatedThisValue, holidays);
if (minDate && buttonDate < minDate)
isDisabled = true;
if (maxDate && buttonDate > maxDate)
isDisabled = true;
var handleClick = function () {
if (onChange) {
onChange(buttonDate);
}
// setDateValue({
// year: buttonDate.getFullYear(),
// month: buttonDate.getMonth(),
// date: buttonDate.getDate(),
// });
};
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": formatedValue === formatedThisValue, "data-holiday": isHoliday, onClick: handleClick, disabled: isDisabled, 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