Skip to content

Commit e176695

Browse files
NoahMLoomisNoahMLoomis
committed
Added disabledDates and added fields to playground
1 parent 1c01467 commit e176695

File tree

4 files changed

+141
-3669
lines changed

4 files changed

+141
-3669
lines changed

‎pages/index.js‎

Lines changed: 112 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,11 @@ export default function Playground() {
2323
const [containerClassName, setContainerClassName] = useState("");
2424
const [displayFormat, setDisplayFormat] = useState("YYYY-MM-DD");
2525
const [readOnly, setReadOnly] = useState(false);
26-
const [startFrom, setStartFrom] = useState("2023-03-01");
26+
const [startFrom, setStartFrom] = useState("2023-01-02");
27+
const [minDate, setMinDate] = useState("");
28+
const [maxDate, setMaxDate] = useState("");
29+
const [disabledDates, setDisabledDates] = useState([]);
30+
const [newDisabledDates, setNewDisabledDates] = useState({ startDate: "", endDate: "" });
2731

2832
return (
2933
<div className="px-4 py-8">
@@ -58,6 +62,9 @@ export default function Playground() {
5862
containerClassName={containerClassName}
5963
displayFormat={displayFormat}
6064
readOnly={readOnly}
65+
minDate={minDate}
66+
maxDate={maxDate}
67+
disabledDates={disabledDates}
6168
/>
6269
</div>
6370

@@ -207,6 +214,19 @@ export default function Playground() {
207214
}}
208215
/>
209216
</div>
217+
<div className="mb-2">
218+
<label className="block" htmlFor="minDate">
219+
Minimum Date
220+
</label>
221+
<input
222+
className="rounded border px-4 py-2 w-full border-gray-200"
223+
id="minDate"
224+
value={minDate}
225+
onChange={e => {
226+
setMinDate(e.target.value);
227+
}}
228+
/>
229+
</div>
210230
</div>
211231
<div className="w-full sm:w-1/3 pr-2 flex flex-col">
212232
<div className="mb-2">
@@ -261,6 +281,97 @@ export default function Playground() {
261281
}}
262282
/>
263283
</div>
284+
<div className="mb-2">
285+
<label className="block" htmlFor="maxDate">
286+
Maximum Date
287+
</label>
288+
<input
289+
className="rounded border px-4 py-2 w-full border-gray-200"
290+
id="maxDate"
291+
value={maxDate}
292+
onChange={e => {
293+
setMaxDate(e.target.value);
294+
}}
295+
/>
296+
</div>
297+
</div>
298+
<div className="w-full grid sm:grid-cols-3">
299+
<div className="sm:col-start-2 sm:col-span-2 p-2 border-t grid grid-cols-2">
300+
<h1 className="mb-2 text-lg font-semibold text-center col-span-3">
301+
Disable Dates
302+
</h1>
303+
<div className="mb-2 sm:col-span-2 mr-2">
304+
<label className="block" htmlFor="startDate">
305+
Start Date
306+
</label>
307+
<input
308+
className="rounded border px-4 py-2 border-gray-200 sm:w-full w-3/4"
309+
id="startDate"
310+
value={newDisabledDates.startDate}
311+
onChange={e => {
312+
setNewDisabledDates(prev => {
313+
return {
314+
...prev,
315+
startDate: e.target.value
316+
};
317+
});
318+
}}
319+
/>
320+
</div>
321+
<div className="mb-2">
322+
<label className="block" htmlFor="endDate">
323+
End Date
324+
</label>
325+
<input
326+
className="rounded border px-4 py-2 border-gray-200 sm:w-full w-3/4"
327+
id="endDate"
328+
value={newDisabledDates.endDate}
329+
onChange={e => {
330+
setNewDisabledDates(prev => {
331+
return {
332+
...prev,
333+
endDate: e.target.value
334+
};
335+
});
336+
}}
337+
/>
338+
</div>
339+
<div className="mb-2 col-span-3">
340+
<button
341+
onClick={() => {
342+
if (
343+
newDisabledDates.startDate !== "" &&
344+
newDisabledDates.endDate !== ""
345+
) {
346+
setDisabledDates(prev => [...prev, newDisabledDates]);
347+
setNewDisabledDates({ startDate: "", endDate: "" });
348+
}
349+
}}
350+
className="w-full bg-black text-white text-lg text-center p-2 rounded-lg"
351+
>
352+
Add
353+
</button>
354+
</div>
355+
<div className="mb-2 grid col-span-3 grid-col-2">
356+
{disabledDates.map((range, index) => (
357+
<div className="mb-2 p-2" key={index}>
358+
<button
359+
className="bg-red-500 text-white text-center rounded-xl p-2"
360+
onClick={() => {
361+
setDisabledDates(
362+
disabledDates.filter(r => r !== range)
363+
);
364+
}}
365+
>
366+
Delete
367+
</button>
368+
<span className="pl-2">
369+
{range.startDate} - {range.endDate}
370+
</span>
371+
</div>
372+
))}
373+
</div>
374+
</div>
264375
</div>
265376
</div>
266377
<div className="flex flex-row flex-wrap items-center justify-center w-full">

‎src/components/Calendar/Days.tsx‎

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,9 @@ const Days: React.FC<Props> = ({
167167
const newHover = `${newDate.year()}-${newDate.month() + 1}-${
168168
day >= 10 ? day : "0" + day
169169
}`;
170-
return dayjs(newHover).isBefore(dayjs(minDate));
170+
return dayjs(newHover).isSame(dayjs(minDate))
171+
? false
172+
: dayjs(newHover).isBefore(dayjs(minDate));
171173
},
172174
[calendarData.date, minDate]
173175
);
@@ -186,8 +188,9 @@ const Days: React.FC<Props> = ({
186188
const newHover = `${newDate.year()}-${newDate.month() + 1}-${
187189
day >= 10 ? day : "0" + day
188190
}`;
189-
190-
return dayjs(newHover).isAfter(dayjs(maxDate).subtract(1, "day"));
191+
return dayjs(newHover).isSame(maxDate)
192+
? false
193+
: dayjs(newHover).isAfter(dayjs(maxDate));
191194
},
192195
[calendarData.date, maxDate]
193196
);
@@ -207,25 +210,26 @@ const Days: React.FC<Props> = ({
207210
day >= 10 ? day : "0" + day
208211
}`;
209212

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;
213+
if (!disabledDates || disabledDates?.length <= 0) {
214+
return false;
215+
}
216+
217+
let matchingCount = 0;
218+
disabledDates?.forEach(dateRange => {
219+
if (
220+
dayjs(newHover).isAfter(dateRange.startDate) &&
221+
dayjs(newHover).isBefore(dateRange.endDate)
222+
) {
223+
matchingCount++;
224+
}
225+
if (
226+
dayjs(newHover).isSame(dateRange.startDate) ||
227+
dayjs(newHover).isSame(dateRange.endDate)
228+
) {
229+
matchingCount++;
230+
}
231+
});
232+
return matchingCount > 0;
229233
},
230234
[calendarData.date, isDateTooEarly, isDateTooLate]
231235
);
@@ -283,7 +287,7 @@ const Days: React.FC<Props> = ({
283287
<button
284288
type="button"
285289
key={index}
286-
disabled={isDateDisabled(index, "previous")}
290+
disabled={isDateDisabled(item, "previous")}
287291
className="flex items-center justify-center text-gray-400 h-12 w-12 lg:w-10 lg:h-10"
288292
onClick={() => onClickPreviousDays(item)}
289293
onMouseOver={() => {
@@ -298,7 +302,7 @@ const Days: React.FC<Props> = ({
298302
<button
299303
type="button"
300304
key={index}
301-
disabled={isDateDisabled(index, "current")}
305+
disabled={isDateDisabled(item, "current")}
302306
className={`${buttonClass(item, "current")}`}
303307
onClick={() => {
304308
onClickDay(item);

‎src/types/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export type DateType = string | null | Date;
3030

3131
export type DateRangeType = {
3232
startDate: DateType;
33-
endDate?: DateType;
33+
endDate: DateType;
3434
};
3535

3636
export type DateValueType = DateRangeType | null;

0 commit comments

Comments
 (0)