jQuery Calendar - Specify the Value Range
Use the min and max properties 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
],
// ...
})Vue
App.vue
<template>
<DxCalendar
:value="date"
:min-date="minDate"
:max-date="maxDate"
/>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxCalendar from 'devextreme-vue/calendar';
export default {
components: {
DxCalendar
},
data() {
return {
date: new Date(),
minDate: new Date(2000, 1, 1),
maxDate: new Date(2020, 12, 31)
}
}
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import Calendar from 'devextreme-react/calendar';
const date = new Date();
const minDate = new Date(2000, 1, 1);
const maxDate = new Date(2020, 12, 31);
class App extends React.Component {
render() {
return (
<Calendar
defaultValue={date}
minDate={minDate}
maxDate={maxDate} />
);
}
}
export default App;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:
jQuery
JavaScript
$(function() {
$("#calendarContainer").dxCalendar({
value: new Date(),
disabledDates: function (data) {
const day = data.date.getDay();
const isWeekend = (day === 0 || day === 6);
return data.view === "month" && isWeekend;
})
});
});Angular
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
],
// ...
})Vue
App.vue
<template>
<DxCalendar
:value="date"
:min-date="minDate"
:max-date="maxDate"
/>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxCalendar from 'devextreme-vue/calendar';
export default {
components: {
DxCalendar
},
data() {
return {
date: new Date()
}
},
methods: {
isDateDisabled({ date, view }) {
const day = date.getDay();
const isWeekend = (day === 0 || day === 6);
return view === "month" && isWeekend;
}
}
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import Calendar from 'devextreme-react/calendar';
const date = new Date();
class App extends React.Component {
render() {
return (
<Calendar
defaultValue={date}
disabledDates={this.isDateDisabled} />
);
}
isDateDisabled({ date, view }) {
const day = date.getDay();
const isWeekend = (day === 0 || day === 6);
return view === "month" && isWeekend;
}
}
export default App;See Also
Feedback