98 |
{},
114 | }
115 | : {})}
116 | />
117 |
118 | {hasCalendarIcon && (
119 |
126 | {calendarIcon ??
128 | )}
129 |
17 | {DAYS_OF_WEEK.map(({ name_en, name_np }) => (
18 |
{lang === "en" ? name_en : name_np}
19 | ))}
20 |
63 | {/* Previous Months days which are in the same first week of current month */}
64 | {Array.from({ length: startingWeekDay - 1 }).map((_, index) => (
65 |
66 | {numberConversion(
67 | lang,
68 | numberOfDaysInPreviousMonth > 0
69 | ? prevStartPosition + index
70 | : undefined
71 | )}
72 |
73 | ))}
74 |
75 | {Array.from({ length: numberOfDays }).map((_, index) => {
76 | const day = index + 1;
77 |
78 | let isDateDisabled = false;
79 |
80 | // check if min and max dates are passed
81 | // this function is causing lagging issue due to many renders and new check for every months
82 | if (min && isValidNepaliDate(min)) {
83 | isDateDisabled = !isGreaterThanOrEqualToMinDate(
84 | date.slice(0, 8) + day,
85 | min
86 | );
87 | }
88 |
89 | // only check the max date if current date is not disabled by min date only
90 | if (!isDateDisabled && max && isValidNepaliDate(max)) {
91 | isDateDisabled = !isLessThanOrEqualToMaxDate(
92 | date.slice(0, 8) + day,
93 | max
94 | );
95 | }
96 |
97 | const isSelected = day === +selectedDate;
98 |
99 | return (
100 |
!isDateDisabled && handleChange(day)}
106 | style={{
107 | ...(isSelected
108 | ? {
109 | color: calendarStyles?.dates?.activeTextColor,
110 | backgroundColor:
111 | calendarStyles?.dates?.activeBackgroundColor,
112 | }
113 | : {
114 | ["--date-picker-np-hover-color" as string]:
115 | calendarStyles?.dates?.hoverBackgroundColor,
116 | }),
117 | }}
118 | >
119 | {numberConversion(lang, day)}
120 |
121 | );
122 | })}
123 |
124 | {/* Upcoming Months days which are in the same last week of current month */}
125 | {Array.from({
126 | length: currentNextMonthDaysCount,
127 | }).map((_, index) => (
128 |
129 | {numberConversion(lang, index + 1)}
130 |
131 | ))}
132 |