@shinyongjun/react-datepicker
Version:
DatePicker component in React App.
57 lines • 3.81 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { NAME_SPACE } from '../../constants/core';
import { checkHoliday, formatDate } from '../../utils/datetime';
export default 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 = useMemo(function () { return (type === 'start' ? value : pairValue); }, [value, pairValue, type]);
var endValue = useMemo(function () { return (type === 'end' ? value : pairValue); }, [value, pairValue, type]);
var formatedDateValue = useMemo(function () { return formatDate(value, defaultFormat); }, [value]);
var formatedStartValue = useMemo(function () {
return type === 'start'
? formatDate(value, defaultFormat)
: formatDate(pairValue, defaultFormat);
}, [value, pairValue, type]);
var formatedEndValue = useMemo(function () {
return type === 'end'
? formatDate(value, defaultFormat)
: 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 = formatDate(buttonDate, defaultFormat);
var isHoliday = checkHoliday(formatedThisValue, holidays);
var handleClick = function () {
if (onChange) {
onChange(buttonDate);
}
};
return (_jsx("button", { type: "button", className: "".concat(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 (_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