Skip to content

Commit a0a89fe

Browse files
NoahMLoomisNoahMLoomis
committed
stashing
1 parent 6b56c50 commit a0a89fe

File tree

5 files changed

+92
-46
lines changed

5 files changed

+92
-46
lines changed

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"name": "react-tailwindcss-datepicker",
3-
"version": "1.3.2",
2+
"name": "nloomis_react-tailwindcss-datepicker",
3+
"version": "1.9.0",
44
"description": "A modern React Datepicker using Tailwind CSS 3",
55
"main": "dist/index.cjs.js",
66
"module": "dist/index.esm.js",
@@ -15,7 +15,8 @@
1515
"pret": "prettier -c .",
1616
"pret:fix": "prettier -w .",
1717
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
18-
"build": "npm run pret && npm run lint && npm run clean && rollup -c"
18+
"build": "npm run pret && npm run lint && npm run clean && rollup -c",
19+
"pub": "npm run build && npm publish"
1920
},
2021
"repository": {
2122
"type": "git",

‎src/components/Calendar/Days.tsx‎

Lines changed: 71 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,16 @@ const Days: React.FC<Props> = ({
3535
onClickNextDays
3636
}) => {
3737
// Contexts
38-
const { primaryColor, period, changePeriod, dayHover, changeDayHover, minDate, maxDate } =
39-
useContext(DatepickerContext);
38+
const {
39+
primaryColor,
40+
period,
41+
changePeriod,
42+
dayHover,
43+
changeDayHover,
44+
minDate,
45+
maxDate,
46+
disabledDates
47+
} = useContext(DatepickerContext);
4048

4149
// Functions
4250
const currentDateClass = useCallback(
@@ -159,8 +167,7 @@ const Days: React.FC<Props> = ({
159167
const newHover = `${newDate.year()}-${newDate.month() + 1}-${
160168
day >= 10 ? day : "0" + day
161169
}`;
162-
163-
return dayjs(newHover).isBefore(dayjs(minDate).subtract(1, "day"));
170+
return dayjs(newHover).isBefore(dayjs(minDate));
164171
},
165172
[calendarData.date, minDate]
166173
);
@@ -180,20 +187,59 @@ const Days: React.FC<Props> = ({
180187
day >= 10 ? day : "0" + day
181188
}`;
182189

183-
return dayjs(newHover).isAfter(dayjs(maxDate));
190+
return dayjs(newHover).isAfter(dayjs(maxDate).subtract(1, "day"));
184191
},
185192
[calendarData.date, maxDate]
186193
);
194+
195+
const isDateDisabled = useCallback(
196+
(day: number, type: string) => {
197+
if (isDateTooEarly(day, type) || isDateTooLate(day, type)) {
198+
return true;
199+
}
200+
const object = {
201+
previous: previousMonth(calendarData.date),
202+
current: calendarData.date,
203+
next: nextMonth(calendarData.date)
204+
};
205+
const newDate = object[type as keyof typeof object];
206+
const newHover = `${newDate.year()}-${newDate.month() + 1}-${
207+
day >= 10 ? day : "0" + day
208+
}`;
209+
210+
// disabledDates?.forEach(dateRange => {
211+
// // If no endDate is provided, disable a single date
212+
// if (!dateRange.endDate) {
213+
// console.log(dayjs(newHover));
214+
// console.log(dayjs(dateRange.startDate));
215+
// console.log(dayjs(newHover).isSame(dayjs(dateRange.startDate)));
216+
// if (dayjs(newHover).isSame(dayjs(dateRange.startDate))) {
217+
// dateShouldBeDisabled = true;
218+
// }
219+
// } else {
220+
// if (
221+
// dayjs(newHover).isAfter(dayjs(dateRange.endDate)) ||
222+
// dayjs(newHover).isBefore(dayjs(dateRange.startDate))
223+
// ) {
224+
// dateShouldBeDisabled = true;
225+
// }
226+
// }
227+
// });
228+
return false;
229+
},
230+
[calendarData.date, isDateTooEarly, isDateTooLate]
231+
);
232+
187233
const buttonClass = useCallback(
188234
(day: number, type: string) => {
189235
const baseClass = "flex items-center justify-center w-12 h-12 lg:w-10 lg:h-10";
190236
return cn(
191237
baseClass,
192238
!activeDateData(day).active ? hoverClassByDay(day) : activeDateData(day).className,
193-
(isDateTooEarly(day, type) || isDateTooLate(day, type)) && "text-red-500"
239+
isDateDisabled(day, type) && "line-through"
194240
);
195241
},
196-
[activeDateData, hoverClassByDay, isDateTooEarly, isDateTooLate]
242+
[activeDateData, hoverClassByDay, isDateDisabled]
197243
);
198244

199245
const hoverDay = useCallback(
@@ -208,36 +254,27 @@ const Days: React.FC<Props> = ({
208254
day >= 10 ? day : "0" + day
209255
}`;
210256

211-
if (!isDateTooEarly(day, type) && !isDateTooLate(day, type)) {
212-
if (period.start && !period.end) {
213-
if (dayjs(newHover).isBefore(dayjs(period.start))) {
214-
changePeriod({
215-
start: null,
216-
end: period.start
217-
});
218-
}
257+
if (period.start && !period.end) {
258+
if (dayjs(newHover).isBefore(dayjs(period.start))) {
259+
changePeriod({
260+
start: null,
261+
end: period.start
262+
});
219263
}
264+
changeDayHover(newHover);
265+
}
220266

221-
if (!period.start && period.end) {
222-
if (dayjs(newHover).isAfter(dayjs(period.end))) {
223-
changePeriod({
224-
start: period.end,
225-
end: null
226-
});
227-
}
267+
if (!period.start && period.end) {
268+
if (dayjs(newHover).isAfter(dayjs(period.end))) {
269+
changePeriod({
270+
start: period.end,
271+
end: null
272+
});
228273
}
229274
changeDayHover(newHover);
230275
}
231276
},
232-
[
233-
calendarData.date,
234-
changeDayHover,
235-
changePeriod,
236-
isDateTooEarly,
237-
isDateTooLate,
238-
period.end,
239-
period.start
240-
]
277+
[calendarData.date, changeDayHover, changePeriod, period.end, period.start]
241278
);
242279

243280
return (
@@ -246,7 +283,7 @@ const Days: React.FC<Props> = ({
246283
<button
247284
type="button"
248285
key={index}
249-
disabled={isDateTooEarly(item, "previous") || isDateTooLate(item, "previous")}
286+
disabled={isDateDisabled(index, "previous")}
250287
className="flex items-center justify-center text-gray-400 h-12 w-12 lg:w-10 lg:h-10"
251288
onClick={() => onClickPreviousDays(item)}
252289
onMouseOver={() => {
@@ -261,7 +298,7 @@ const Days: React.FC<Props> = ({
261298
<button
262299
type="button"
263300
key={index}
264-
disabled={isDateTooEarly(item, "current") || isDateTooLate(item, "current")}
301+
disabled={isDateDisabled(index, "current")}
265302
className={`${buttonClass(item, "current")}`}
266303
onClick={() => {
267304
onClickDay(item);
@@ -278,7 +315,7 @@ const Days: React.FC<Props> = ({
278315
<button
279316
type="button"
280317
key={index}
281-
disabled={isDateTooEarly(item, "next") || isDateTooLate(item, "next")}
318+
disabled={isDateDisabled(index, "previous")}
282319
className="flex items-center justify-center text-gray-400 h-12 w-12 lg:w-10 lg:h-10"
283320
onClick={() => {
284321
onClickNextDays(item);

‎src/components/Datepicker.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { COLORS, DEFAULT_COLOR } from "../constants";
99
import DatepickerContext from "../contexts/DatepickerContext";
1010
import { formatDate, nextMonth, previousMonth } from "../helpers";
1111
import useOnClickOutside from "../hooks";
12-
import { Period, DateValueType, DateType } from "../types";
12+
import { Period, DateValueType, DateType, DateRangeType } from "../types";
1313

1414
import { Arrow, VerticalDash } from "./utils";
1515

@@ -45,6 +45,7 @@ interface Props {
4545
readOnly?: boolean;
4646
minDate?: DateType | null;
4747
maxDate?: DateType | null;
48+
disabledDates?: DateRangeType[] | null;
4849
}
4950

5051
const Datepicker: React.FC<Props> = ({
@@ -66,7 +67,8 @@ const Datepicker: React.FC<Props> = ({
6667
displayFormat = "YYYY-MM-DD",
6768
readOnly = false,
6869
minDate = null,
69-
maxDate = null
70+
maxDate = null,
71+
disabledDates = null
7072
}) => {
7173
// Ref
7274
const containerRef = useRef<HTMLDivElement>(null);
@@ -266,7 +268,8 @@ const Datepicker: React.FC<Props> = ({
266268
readOnly,
267269
displayFormat,
268270
minDate,
269-
maxDate
271+
maxDate,
272+
disabledDates
270273
};
271274
}, [
272275
asSingle,
@@ -289,7 +292,8 @@ const Datepicker: React.FC<Props> = ({
289292
displayFormat,
290293
firstGotoDate,
291294
minDate,
292-
maxDate
295+
maxDate,
296+
disabledDates
293297
]);
294298

295299
return (

‎src/contexts/DatepickerContext.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import dayjs from "dayjs";
22
import React, { createContext } from "react";
33

4-
import { Configs, Period, DateValueType, DateType } from "../types";
4+
import { Configs, Period, DateValueType, DateType, DateRangeType } from "../types";
55

66
interface DatepickerStore {
77
asSingle?: boolean;
@@ -30,6 +30,7 @@ interface DatepickerStore {
3030
displayFormat?: string;
3131
minDate?: DateType | null;
3232
maxDate?: DateType | null;
33+
disabledDates?: DateRangeType[] | null;
3334
}
3435

3536
const DatepickerContext = createContext<DatepickerStore>({
@@ -60,7 +61,8 @@ const DatepickerContext = createContext<DatepickerStore>({
6061
readOnly: false,
6162
displayFormat: "YYYY-MM-DD",
6263
minDate: null,
63-
maxDate: null
64+
maxDate: null,
65+
disabledDates: null
6466
});
6567

6668
export default DatepickerContext;

‎src/types/index.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ export interface ShortcutsItem {
2828

2929
export type DateType = string | null | Date;
3030

31-
export type DateValueType = {
31+
export type DateRangeType = {
3232
startDate: DateType;
33-
endDate: DateType;
34-
} | null;
33+
endDate?: DateType;
34+
};
35+
36+
export type DateValueType = DateRangeType | null;

0 commit comments

Comments
 (0)