JavaScript/jQuery Calendar - Specify the Value Range

Use the min and max properties to specify the range of available dates.

HTML
TypeScript
  • <dx-calendar
  • [(value)]="date"
  • [min]="minDate"
  • [max]="maxDate">
  • </dx-calendar>
  • import { DxCalendarModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • date: Date = new Date();
  • minDate: Date = new Date(2000, 1, 1);
  • maxDate: Date = new Date(2020, 12, 31);
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxCalendarModule
  • ],
  • // ...
  • })

If you need to disable specific dates, use the disabledDates property. You can specify either an array of predefined dates or a function that determines whether a date is available. For example, the following code disables weekends:

HTML
TypeScript
  • <dx-calendar
  • [(value)]="date"
  • [disabledDates]="isDateDisabled">
  • </dx-calendar>
  • import { DxCalendarModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • date: Date = new Date();
  • isDateDisabled({ date, view }) {
  • const day = date.getDay();
  • const isWeekend = (day === 0 || day === 6);
  • return view === "month" && isWeekend;
  • };
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxCalendarModule
  • ],
  • // ...
  • })

View Demo

See Also