# Disabling Different Ranges of Dates in Kendo DatePicker

### Environment

<table>
    <tbody>
	    <tr>
	    	<td>Product</td>
	    	<td>Progress® Kendo UI for Angular DatePicker</td>
	    </tr>
    </tbody>
</table>

## Description

How can I disable different date ranges in the Kendo DatePicker component?

## Solution

To disable different ranges of dates and limit the date selection, you can set the [`disabledDates`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/datepickercomponent#disableddates) property to a custom function.

1. Set the `disabledDates` property to a custom function.
   ```html
    <kendo-datepicker ... [disabledDates]="disableRanges"></kendo-datepicker>
   ```

2. Inside the function, use conditional statements to define the disabled dates. For example, you can limit the date selection to a 30-day time period starting today. To achieve this, you will need to disable all dates before today and after 30 days by using the following logic:

   ```ts
   public disableRanges = (date: Date): boolean => {
       const today = new Date();
       const thirtyDaysFromNow = new Date();
       thirtyDaysFromNow.setDate(today.getDate() + 30);

     return date < today || date > thirtyDaysFromNow;
   };
   ```

3. Now, the DatePicker component will disable all dates before today and after 30 days.

## See Also

* [Kendo UI for Angular DatePicker Documentation](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker)