@zenithui/day-picker
Version:
A ZenithUi Time Picker is React component enables users to select a date or date range from calendar.
30 lines (29 loc) • 1.92 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 DayPickerYears() {
const { currentMonth, classNames, setState, setCurrentMonth } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_use_day_picker_js_4816b2bd__.useDayPicker)();
const years = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
const endYear = (0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.getYear)(currentMonth);
return Array.from({
length: 12
}, (_, i)=>(0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.setYear)(currentMonth, endYear - (11 - 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: years.map((year)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
"data-month": (0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.format)(year, "yyyy"),
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)("zenithui-day", classNames?.day),
onClick: ()=>{
setCurrentMonth(year);
setState("month");
},
children: (0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.format)(year, "yyyy")
}, `zenithui-year-${(0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.format)(year, "yyyy")}`))
});
}
export { DayPickerYears };