@zenithui/day-picker
Version:
A ZenithUi Time Picker is React component enables users to select a date or date range from calendar.
27 lines (26 loc) • 1.72 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__ from "date-fns";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__hooks_use_day_picker_js_4816b2bd__ from "../hooks/use-day-picker.js";
import * as __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__ from "@zenithui/utils";
function DayPickerMonths() {
const { currentMonth, classNames, setState, setCurrentMonth } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_use_day_picker_js_4816b2bd__.useDayPicker)();
const months = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>Array.from({
length: 12
}, (_, i)=>(0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.setMonth)(currentMonth, i)), [
currentMonth
]);
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)("zenithui-months", classNames?.months),
children: months.map((month)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
"data-month": (0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.format)(month, "M"),
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)("zenithui-day", classNames?.day),
onClick: ()=>{
setCurrentMonth(month);
setState("day");
},
children: (0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.format)(month, "MMMM")
}, `zenithui-month-${month}`))
});
}
export { DayPickerMonths };