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
- ],
- // ...
- })
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.