DevExtreme jQuery/JS - Specify the Value Range
Use the min and max options to specify the range of available dates.
App.js
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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 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:
App.js
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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
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.