@rnwonder/react-date-picker
Version:
A simple and reusable Datepicker component for ReactJS ([Demo](https://stackblitz.com/edit/solidjs-templates-dof6jl?file=src%2FApp.tsx))
2 lines (1 loc) • 1.76 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../CalendarDays/index.js"),r=require("../WeekDays/index.js"),s=require("../../utils/class.js"),n=require("react"),l=require("../Helpers/Show.js");exports.CalendarArea=o=>{const[t,d]=n.useState(0),[i,c]=n.useState(0);return n.useEffect((()=>{0===o.month||(11===o.month?(d(o.year+1),c(0)):(d(o.year),c(o.month+1)))}),[o.month,o.year]),e.jsxs("div",{className:s.cn("date-picker-calendar-wrapper rn-flex rn-min-w-max breakTwoCalendar:rn-flex-col",o.calendarWrapperClass),children:[e.jsxs("div",{className:s.cn("date-picker-calendar-area-one",{"rn-px-4":!o.twoMonthsDisplay,"breakTwoCalendar:rn-px-4 aboveBreakTwoCalendar:rn-pl-4":o.twoMonthsDisplay},o.calendarOneAreaClass),"data-scope":"date-picker","data-part":"grid",role:"grid","data-columns":7,"aria-roledescription":"calendar month",tabIndex:-1,children:[o.weekDaysJSX||e.jsx(r.WeekDays,{...o,weekDaysNameColor:o.weekDaysNameColor,weekDaysType:o.weekDaysType,locale:o.locale,weekStartDay:o.weekStartDay}),e.jsx(a.CalendarDays,{...o})]}),e.jsxs(l,{when:o.twoMonthsDisplay,children:[e.jsx("div",{className:s.cn("date-picker-calendar-area-divider rn-divider aboveBreakTwoCalendar:rn-divider-horizontal aboveBreakTwoCalendar:rn-mx-2 aboveBreakTwoCalendar:rn-w-fit ",o.calendarDividerClass)}),e.jsxs("div",{className:s.cn("date-picker-calendar-area-two",{"breakTwoCalendar:rn-px-4 aboveBreakTwoCalendar:rn-pr-4":o.twoMonthsDisplay},o.calendarTwoAreaClass),children:[o.weekDaysJSX||e.jsx(r.WeekDays,{...o,weekDaysNameColor:o.weekDaysNameColor,weekDaysType:o.weekDaysType,locale:o.locale,weekStartDay:o.weekStartDay}),e.jsx(a.CalendarDays,{...o,month:i,year:t,nextMonth:!0})]})]})]})};