Limit number of picked days

[Ansaen]

Hello, Is there some way to limit number of picked days?

Obviously i am using "multiple". Let´s say i would like to limit it to 3 days, so when u pick 3 different days u can´t choose more but, when u deselect one of them u can again pick another date.

Any idea ?

[ibrahimrehman1]

Hi there,

I am also facing the same issue. Were you able to fix this? @Ansaen

[michsko544]

The solution I found is to use the mapDays prop and pass the disabled prop when reaching the limit for other than selected days:

value={values}
mapDays={({ date }) => {
    const reachLimit = values.length === selectionLimit;
    const isNotSelectedDate = !values.some(val => moment(val).isSame(moment(date.toDate())));

    return reachLimit && isNotSelectedDate ? { disabled: true } : {};
}}

[EdithAllison]

Thank you for this code, that helped a lot! In my calendar I wanted to disable all dates when a limit was reached except the selected dates, so that users could de-select / modify.

"params.max" is the limit, passed into React as a WordPress JS localization.

mapDays={({ date, selectedDate, isSameDate }) => {
	const reachLimit = values.length >= params.max;
	const isNotSelectedDate = !selectedDate.some(val => {
		return isSameDate(date, val);
	});
	return reachLimit && isNotSelectedDate ? { disabled: true } : {};
}}

I'm using the properties date, selectedDate and the function isSameDate as detailed here: https://shahabyazdi.github.io/react-multi-date-picker/map-days/