DevExtreme v23.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

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.

Prev Demo
Next Demo
Backend API
$(() => { 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, }); $('#disable-out-of-range-selection').dxDateRangeBox({ disableOutOfRangeSelection: true, }); 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.2.5/css/dx.light.css" /> <script src="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">Disable out of range selection</div> <div class="dx-field-value"> <div id="disable-out-of-range-selection"></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; }