Overview

The DateRangeBox component allows users to select a date range with ease. The component includes input boxes for start/end dates and a drop-down date picker. This demo illustrates how to apply the following DateRangeBox settings:

value An array where you can specify the selected range (start/end dates). The DateRangeBox also allows you to define start/end dates separately. For this purpose, use the startDate and endDate properties instead.
displayFormat Date display format. You can use one of our predefined formats or specify a custom format as needs dictate. This demo illustrates the latter.
disabled Specifies whether the DateRangeBox responds to user interaction.
showClearButton Displays a button that clears DateRangeBox values.
multiView Switches between our single-month and two-month dropdown calendar.
applyValueMode Defines whether the selected value is applied instantly or after a user clicks the Apply button.

To get started with the DevExtreme DateRangeBox component, refer to the Getting Started with DateRangeBox tutorial.

See more Hide details

Prev Demo Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

Angular

Vue

React

ASP.NET Core

ASP.NET MVC

Backend API

Copy to CodePen

Apply

Reset

$(() => { const msInDay = 1000 * 60 * 60 * 24; const now = new Date(); const initialValue = [ new Date(now.getTime() - msInDay * 3), new Date(now.getTime() + msInDay * 3), ]; $('#range-selection').dxDateRangeBox({ value: initialValue, onValueChanged: showSelectedDays, }); $('#custom-format').dxDateRangeBox({ value: initialValue, displayFormat: 'EEEE, MMM dd', }); $('#apply-value').dxDateRangeBox({ applyValueMode: 'useButtons', }); $('#single-view').dxDateRangeBox({ multiView: false, }); $('#icon-click-only').dxDateRangeBox({ openOnFieldClick: false, }); $('#current-month-only').dxDateRangeBox({ ...getCurrentMonthRange(), }); $('#clear').dxDateRangeBox({ showClearButton: true, value: initialValue, }); function getCurrentMonthRange() { const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate(); const min = new Date(now.setDate(1)); const max = new Date(now.setDate(lastDay)); return { min, max }; } function showSelectedDays({ value: [startDate, endDate] }) { let daysCount = 0; if (startDate && endDate) { daysCount = (endDate - startDate) / msInDay + 1; } $('#days-selected').text(daysCount); } showSelectedDays({ value: initialValue }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label multiline-label"> <span>Default functionality</span> <div class="selected-days-wrapper"> <span>Days selected: </span> <span id="days-selected"></span> </div> </div> <div class="dx-field-value"> <div id="range-selection"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Custom format</div> <div class="dx-field-value"> <div id="custom-format"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Use buttons to apply selection</div> <div class="dx-field-value"> <div id="apply-value"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Single-calendar View</div> <div class="dx-field-value"> <div id="single-view"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Calendar only appears on icon click</div> <div class="dx-field-value"> <div id="icon-click-only"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Limit available dates (this month)</div> <div class="dx-field-value"> <div id="current-month-only"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Clear button</div> <div class="dx-field-value"> <div id="clear"></div> </div> </div> </div> </div> </body> </html>

.demo-container { height: 690px; } .dx-field { padding: 8px; } .selected-days-wrapper { font-size: 12px; opacity: 0.5; } .multiline-label { padding-top: 0; }