General Information

.NET Subscription

What's Included

DevExpress Installation

DevExpress Code Examples

Common Tools

Project Converter

Assembly Deployment Tool

Localization Service

Quality Assurance and Productivity

CodeRush for Visual Studio (FREE)

TestCafe Studio

Desktop

Controls

WinForms

WPF

VCL

WinUI

Tools

WinForms Skin Editor

WPF Theme Designer

WPF Theme Editor (Legacy)

Coded UI Test Extension

Frameworks and Libraries

XAF - Cross-Platform .NET App UI

XPO - .NET ORM Library (FREE)

XPO Profiler

Core Libraries

Drawing Graphics Library

.NET App Security & Web API Service (FREE)

Web

Mobile

Xamarin UI Controls (FREE)

.NET MAUI (FREE)

Enterprise and Analytic Tools

Reporting

Report and Dashboard Server

BI Dashboard

Office File API

End-User Documentation

Interface Elements for Desktop

Interface Elements for Web

Dashboard for Desktop

Dashboard for Web

JavaScript/jQuery 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/24.2.3/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.2.3/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:

API Reference

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery DateRangeBox - Getting Started

jQuery

Angular

Vue

React

Create the DateRangeBox

jQuery

Angular

Vue

React

Set the Accepted Date Range

jQuery

Angular

Vue

React

Set the Initial Date Range Values

jQuery

Angular

Vue

React

Add Labels

jQuery

Angular

Vue

React

Handle the Value Change Event

jQuery

Angular

Vue

React