React Calendar - Specify the Value Range
Use the min and max properties to specify the range of available dates.
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>
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:
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>
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.