Disable dates in the future

[siboscol]

Hi, amazing components, simple, straightforward and complete. may I ask you if there is any way to disable dates in the future? I'm not sure it's clear to me how to use endDate and startDate props.

[flippingbitss]

Hi @siboscol, thank you for using my component.

interface DateRangePickerProps {
	open: boolean;
	initialDateRange?: DateRange;
	definedRanges?: DefinedRange[];
	minDate?: Date | string;
	maxDate?: Date | string;
	onChange: (dateRange: DateRange) => void;
}

Above are the props taken by the picker, you can specify the minDate and maxDate prop and that will disable the dates outside of that range, it accepts both Date object and Date strings.

The component currently doesn't support disabling specific dates. Feel free to submit a PR or start a discussion in this thread.

[siboscol]

Hi @matharumanpreet00 , Thanks a lot for your quick reply. It works setting the minDate and maxDate! I noticed that if I set up from 2002 until today I can see until 2004 as start year.

Is there a way to not see future years and allow user to select only past dates?

[flippingbitss]

I noticed that if I set up from 2002 until today I can see until 2004 as start year.

Yes, its a 30 year span in total with today at the mid. But that is something i would like to improve and make it respect minDate and maxDate props. I will be working towards this in the coming weeks.

Is there a way to not see future years and allow user to select only past dates?

For now, you could set maxDate as today and not set any minDate so that gives you max range. In the future versions, i will fix the years to respect these props.

Thanks.

[siboscol]

Thanks a lot, very useful. What I'm trying to do is to let user select a period in the past between today and 2002. At the moment the only way to pick 2002 is to select 2004 and then reselect 2002. I tried as well to not set any minDatebut then because of the default values on 10 years, I wouldn't be able to pick a date in 2002. Anyway I really appreciate your effort in making date range respecting minDate and maxDate. If there is anything I could do help you let me know. Unfortunately I'm not proficient with typescript.

[flippingbitss]

No problem. If you like to try your hands on it, you can look at changing the signature of this function to accept minDate and maxDate. JavaScript is valid TypeScript, so you can just use that if you like.

[williamluke4]

What are peoples thoughts on adding a disabledRanges prop

interface DateRangePickerProps {
	open: boolean;
	initialDateRange?: DateRange;
	definedRanges?: DefinedRange[];
        disabledRanges?:DateRange[];
	minDate?: Date | string;
	maxDate?: Date | string;
	onChange: (dateRange: DateRange) => void;
}

[aemendoza072583]

How to disable a specific dates?