Vue DateRangeBox - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

DateRangeBox is a UI component that allows users to enter or pick two dates (a date range).

This tutorial shows how to configure basic DateRangeBox features.

Each section in this tutorial describes a single configuration step. You can also find the full code in the GitHub repository.

View on GitHub

Create the DateRangeBox

Use the following code to create a basic DateRangeBox:

App.vue (Options API)
App.vue (Composition API)
  • <template>
  • <DxDateRangeBox
  • // Configuration goes here
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxDateRangeBox } from 'devextreme-vue/date-range-box';
  •  
  • export default {
  • components: {
  • DxDateRangeBox
  • }
  • }
  • </script>
  • <template>
  • <DxDateRangeBox
  • // Configuration goes here
  • />
  • </template>
  •  
  • <script setup>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxDateRangeBox } from 'devextreme-vue/date-range-box';
  • // ...
  • </script>

Run this code. You will see a DateRangeBox component that allows users to enter or pick two dates (a date range). The next step configures date range constraints.

Set the Accepted Date Range

You can define constraints for date ranges that can be selected by end users. Specify the min and max properties.

App.vue (Options API)
App.vue (Composition API)
  • <template>
  • <DxDateRangeBox ...
  • :min="minDate"
  • :max="maxDate"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxDateRangeBox } from 'devextreme-vue/date-range-box';
  •  
  • const now = new Date();
  •  
  • export default {
  • components: {
  • DxDateRangeBox
  • },
  • data() {
  • return {
  • minDate: new Date().setDate(now.getDate()-14), // 2 weeks before the current date
  • maxDate: new Date().setDate(now.getDate()+14), // 2 weeks after the current date
  • }
  • }
  • }
  • </script>
  • <template>
  • <DxDateRangeBox ...
  • :min="minDate"
  • :max="maxDate"
  • />
  • </template>
  •  
  • <script setup>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxDateRangeBox } from 'devextreme-vue/date-range-box';
  •  
  • const now = new Date();
  • const minDate = new Date().setDate(now.getDate()-14); // 2 weeks before the current date
  • const maxDate = new Date().setDate(now.getDate()+14); // 2 weeks after the current date
  • </script>

Run the code. You can now select dates only within the predefined range: from two weeks before the current date to two weeks after. The next step specifies the date range selected at startup.

Set the Initial Date Range Values

To specify a date range selected at startup, use the startDate and endDate properties. You can also assign an array with start and end dates to the value property. The following code sets the range to a week that starts on the current date.

App.vue (Options API)
App.vue (Composition API)
  • <template>
  • <DxDateRangeBox ...
  • :start-date="startDate"
  • :end-date="endDate"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxDateRangeBox } from 'devextreme-vue/date-range-box';
  •  
  • export default {
  • components: {
  • DxDateRangeBox
  • },
  • data() {
  • return {
  • startDate: new Date(),
  • endDate: new Date().setDate(new Date().getDate()+7),
  • }
  • }
  • }
  • </script>
  • <template>
  • <DxDateRangeBox ...
  • :start-date="startDate"
  • :end-date="endDate"
  • />
  • </template>
  •  
  • <script setup>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxDateRangeBox } from 'devextreme-vue/date-range-box';
  •  
  • const startDate = new Date();
  • const endDate = new Date().setDate(new Date().getDate()+7);
  • </script>

The next step specifies labels for the start date and end date input fields.

Add Labels

If you want to define start date and end date labels, use startDateLabel and endDateLabel properties. To enable floating labels, assign "floating" to the labelMode property. In this mode, labels first appear as value placeholders. When editors obtain focus, labels move up and stay above their input fields.

App.vue (Options API)
App.vue (Composition API)
  • <template>
  • <DxDateRangeBox ...
  • start-date-label="Start"
  • end-date-label="End"
  • label-mode="floating"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxDateRangeBox } from 'devextreme-vue/date-range-box';
  •  
  • export default {
  • components: {
  • DxDateRangeBox
  • },
  • }
  • </script>
  • <template>
  • <DxDateRangeBox ...
  • start-date-label="Start"
  • end-date-label="End"
  • label-mode="floating"
  • />
  • </template>
  •  
  • <script setup>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxDateRangeBox } from 'devextreme-vue/date-range-box';
  • // ...
  • </script>

The next step handles the value change event.

Handle the Value Change Event

To respond to a date range change, handle the onValueChanged event. In this tutorial, the callback function logs the previous and current date ranges.

App.vue (Options API)
App.vue (Composition API)
  • <template>
  • <DxDateRangeBox ...
  • @value-changed="onValueChanged"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxDateRangeBox } from 'devextreme-vue/date-range-box';
  •  
  • export default {
  • // ...
  • methods: {
  • onValueChanged(e) {
  • console.log(e.value);
  • console.log(e.previousValue);
  • }
  • }
  • }
  • </script>
  • <template>
  • <DxDateRangeBox ...
  • @value-changed="onValueChanged"
  • />
  • </template>
  •  
  • <script setup>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxDateRangeBox } from 'devextreme-vue/date-range-box';
  •  
  • const onValueChanged = (e) => {
  • console.log(e.value);
  • console.log(e.previousValue);
  • }
  • </script>

You have now completed DateRangeBox basic configuration. For additional information on this UI component, see the following link: