@shinyongjun/react-datepicker
Version:
DatePicker component in React App.
49 lines • 3.16 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { NAME_SPACE } from '../../constants/core';
import { checkHoliday, formatDate } from '../../utils/datetime';
export default 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 = 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 = formatDate(buttonDate, valueFormat);
var isHoliday = 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 (_jsx("button", { type: "button", className: "".concat(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 (_jsxs("div", { className: "".concat(NAME_SPACE, "__month-view"), children: [weekdayLabels.map(function (day, index) { return (_jsx("div", { className: "".concat(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(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(NAME_SPACE, "__neighbor-button"));
})] }));
}
//# sourceMappingURL=Month.js.map