# DatePicker Disabled Dates

The DatePicker allows you to disable the selection of specified dates by providing a [`disabledDates`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/datepickercomponent#disableddates) value to the component.

The DatePicker supports the following approaches for disabling dates:

* [Using a function](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/disabled-dates#using-a-function)—The format for this input is `(date: Date) => boolean`. The approach disables each date for which the provided function returns `true`.
* [Using an array of dates](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/disabled-dates#using-a-date-array)—The format for this input is [`Date[]`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date). The approach disables only the dates that are explicitly listed.
* [Using an array of days](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/disabled-dates#using-a-day-array)—The format for this input is [`Day[]`](https://www.telerik.com/kendo-angular-ui/components/date-math/api/day). The approach disables the specified days of the week.

You can also prevent the user from [entering disabled dates with typing](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/disabled-dates#preventing-invalid-input).

## Using a Function

The following example demonstrates how to provide a function to disable every even date in the DatePicker.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dateinputs/datepicker/disabled_dates/source.txt)

## Using a Date Array

The following example demonstrates how to provide an array of dates to disable the listed dates.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dateinputs/datepicker/disabled_dates/using_date_array/source.txt)

## Using a Day Array

The following example demonstrates how to provide an array of [`Day`](https://www.telerik.com/kendo-angular-ui/components/date-math/api/day) enum values to disable the listed days of the week, that is, the days of the weekend.

```ts
import { Day } from '@progress/kendo-date-math';

@Component({
  selector: 'my-app',
  template: `
    <kendo-datepicker
      [(ngModel)]="value"
      [disabledDates]="disabledDates"
    >
    </kendo-datepicker>
  `
})
export class AppComponent {
  public value: Date;
  public disabledDates: Day[] = [Day.Saturday, Day.Sunday];
}
```

## Preventing Invalid Input

The DatePicker input doesn't prevent the user from entering dates, which are marked as disabled, with typing.

To avoid this behavior, use either of the following options:

* Set the [`readOnlyInput`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/datepickercomponent#readonlyinput) property of the DatePicker to `true`, allowing in this way the user to choose a date only from the popup Calendar ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/readonly-state#read-only-input)).
* Use the built-in disabled dates validation to notify users that their input is invalid ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/disabled-dates#preventing-invalid-input)).

  By default, forms validation is enabled. To disable it, set the [`disabledDatesValidation`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/datepickercomponent#disableddatesvalidation) property to `false`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dateinputs/datepicker/disabled_dates/prevent-input/source.txt)

## Suggested Links

* [API Reference of the DatePicker](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/datepickercomponent)