DevExtreme jQuery - Specify the Value Range
Use the min and max options to specify the range of available dates.
jQuery
JavaScript
$(function() {
$("#calendarContainer").dxCalendar({
value: new Date(),
min: new Date(2000, 1, 1),
max: new Date(2020, 12, 31)
});
});Angular
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 option. 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:
jQuery
JavaScript
$(function() {
$("#calendarContainer").dxCalendar({
value: new Date(),
disabledDates: function (data) {
var day = data.date.getDay();
var isWeekend = (day === 0 || day === 6);
return data.view === "month" && isWeekend;
})
});
});Angular
HTML
TypeScript
<dx-calendar
[(value)]="date"
[disabledDates]="disabledDates">
</dx-calendar>
import { DxCalendarModule } from "devextreme-angular";
// ...
export class AppComponent {
date: Date = new Date();
disabledDates (data) {
let day = data.date.getDay();
let isWeekend = (day === 0 || day === 6);
return data.view === "month" && isWeekend;
};
}
@NgModule({
imports: [
// ...
DxCalendarModule
],
// ...
})See Also
Feedback