Vue DateRangeBox - Getting Started

jQuery
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Angular
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Vue
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
React
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:

jQuery
index.js
index.html
$(function() {
    $("#dateRangeBox").dxDateRangeBox({
        // Configuration goes here
    });
});
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.2.10/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/23.2.10/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body class="dx-viewport">
        <div id="dateRangeBox"></div>
    </body>
</html>
Angular
app.component.html
app.component.ts
app.module.ts
<dx-date-range-box
    // Configuration goes here
></dx-date-range-box>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDateRangeBoxModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDateRangeBoxModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})

export class AppModule { }
Vue
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>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { DateRangeBox } from 'devextreme-react/date-range-box';

export default function App() { 
    return (
        <DateRangeBox ...
            // Configuration goes here
        />
    );
}

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.

jQuery
index.js
$(function() {
    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

    $("#dateRangeBox").dxDateRangeBox({
        min: minDate,
        max: maxDate,
     });
});
Angular
app.component.html
app.component.ts
<dx-date-range-box ... 
    [min]="minDate"
    [max]="maxDate"
></dx-date-range-box>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    now: Date = new Date();
    minDate: Date = new Date().setDate(now.getDate()-14); // 2 weeks before the current date
    maxDate: Date = new Date().setDate(now.getDate()+14); // 2 weeks after the current date
}
Vue
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>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { DateRangeBox } from 'devextreme-react/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

export default function App() { 
    return (
        <DateRangeBox ...
            min={minDate}
            max={maxDate}
        />
    );
}

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.

jQuery
index.js
$(function() {
    $("#dateRangeBox").dxDateRangeBox({
        startDate: new Date(),
        endDate: new Date().setDate(new Date().getDate()+7),
    });
});
Angular
app.component.html
app.component.ts
<dx-date-range-box ...    
    [startDate]="startDate"
    [endDate]="endDate"
></dx-date-range-box>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    // ...
    startDate: Date = new Date();
    endDate: Date = new Date().setDate(new Date().getDate()+7);
}
Vue
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>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { DateRangeBox } from 'devextreme-react/date-range-box';

const startDate = new Date();
const endDate = new Date().setDate(new Date().getDate()+7);

export default function App() { 
    return (
        <DateRangeBox ...
            startDate={startDate}
            endDate={endDate}
        />
    );
}

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.

jQuery
index.js
$(function() {
    $("#dateRangeBox").dxDateRangeBox({
        startDateLabel: "Start",
        endDateLabel: "End",
        labelMode: "floating",
    });
});
Angular
app.component.html
app.component.ts
<dx-date-range-box ...    
    startDateLabel="Start"
    endDateLabel="End"
    labelMode="floating"
></dx-date-range-box>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {}
Vue
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>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { DateRangeBox } from 'devextreme-react/date-range-box';

export default function App() { 
    return (
        <DateRangeBox ...
            startDateLabel="Start"
            endDateLabel="End"
            labelMode="floating"
        />
    );
}

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.

jQuery
index.js
$(function() {
    $("#dateRangeBox").dxDateRangeBox({
        onValueChanged: (e) => {
            console.log(e.value);
            console.log(e.previousValue);
        },
    });
});
Angular
app.component.html
app.component.ts
<dx-date-range-box ...
    (onValueChanged)="onValueChanged($event)"
></dx-date-range-box>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    // ...
    onValueChanged(e) {
        console.log(e.value);
        console.log(e.previousValue);  
    }
}
Vue
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>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { DateRangeBox } from 'devextreme-react/date-range-box';

const onValueChanged = (e) => {
    console.log(e.value);
    console.log(e.previousValue);  
} 

export default function App() { 
    return (
        <DateRangeBox ...
            onValueChanged={onValueChanged}
        />
    );
}

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