diff --git a/README.md b/README.md index 8235577c..43b1b60d 100644 --- a/README.md +++ b/README.md @@ -95,6 +95,7 @@ export default function ReadMeExampleSingle() { // validRange={{ // startDate: new Date(2021, 1, 2), // optional // endDate: new Date(), // optional + // disabledDates: [new Date()] // optional // }} // onChange={} // same props as onConfirm but triggered without confirmed by user // saveLabel="Save" // optional @@ -149,6 +150,7 @@ export default function ReadMeExampleRange() { // validRange={{ // startDate: new Date(2021, 1, 2), // optional // endDate: new Date(), // optional + // disabledDates: [new Date()] // optional // }} // onChange={} // same props as onConfirm but triggered without confirmed by user // locale={'nl'} // optional @@ -203,6 +205,7 @@ export default function ReadMeExampleMultiple() { // validRange={{ // startDate: new Date(2021, 1, 2), // optional // endDate: new Date(), // optional + // disabledDates: [new Date()] // optional // }} // locale={'nl'} // optional // saveLabel="Save" // optional diff --git a/src/Date/Calendar.tsx b/src/Date/Calendar.tsx index 417980f7..027a9b8e 100644 --- a/src/Date/Calendar.tsx +++ b/src/Date/Calendar.tsx @@ -25,6 +25,7 @@ export type ScrollModeType = 'horizontal' | 'vertical' export type ValidRangeType = { startDate?: Date endDate?: Date + disabledDates?: Date[] } export type BaseCalendarProps = { diff --git a/src/Date/Month.tsx b/src/Date/Month.tsx index d9b37c89..a0fe12d3 100644 --- a/src/Date/Month.tsx +++ b/src/Date/Month.tsx @@ -120,6 +120,10 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) { ) : undefined + const validDisabledDates = validRange?.disabledDates + ? validRange?.disabledDates + : undefined + const { monthName, month, year } = React.useMemo(() => { const md = addMonths(new Date(), realIndex) const y = md.getFullYear() @@ -153,11 +157,22 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) { let inRange = false let disabled = false let selected = false + let inDisabledDates = false let leftCrop = dayOfMonth === 1 let rightCrop = dayOfMonth === daysInMonth const isFirstDayOfMonth = dayOfMonth === 1 const isLastDayOfMonth = dayOfMonth === daysInMonth + + inDisabledDates = validDisabledDates + ? validDisabledDates.some((disabledDate) => + areDatesOnSameDay(disabledDate, day) + ) + : false + if (inDisabledDates) { + disabled = true + } + if (mode === 'range') { const selectedStartDay = areDatesOnSameDay(day, startDate) const selectedEndDay = areDatesOnSameDay(day, endDate) @@ -237,7 +252,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) { endUnix: validRangeEnd, }) - if (inRange) { + if (inRange && !inDisabledDates) { disabled = false } @@ -273,6 +288,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) { dates, validRangeStart, validRangeEnd, + validDisabledDates, mode, ])