Your search did not match any results.

Date Range Box - 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.

Backend API
<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"> @(Html.DevExtreme().DateRangeBox() .Value(new JS("initialValue")) .OnValueChanged("showSelectedDays") ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Custom format</div> <div class="dx-field-value"> @(Html.DevExtreme().DateRangeBox() .Value(new JS("initialValue")) .DisplayFormat("EEEE, MMM dd") ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Use buttons to apply selection</div> <div class="dx-field-value"> @(Html.DevExtreme().DateRangeBox() .ApplyValueMode(EditorApplyValueMode.UseButtons) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Single-calendar view</div> <div class="dx-field-value"> @(Html.DevExtreme().DateRangeBox() .MultiView(false) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Calendar only appears on icon click</div> <div class="dx-field-value"> @(Html.DevExtreme().DateRangeBox() .OpenOnFieldClick(false) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Limit available dates (this month)</div> <div class="dx-field-value"> @(Html.DevExtreme().DateRangeBox() .Min(new JS("minValue")) .Max(new JS("maxValue")) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Disable out of range selection</div> <div class="dx-field-value"> @(Html.DevExtreme().DateRangeBox() .DisableOutOfRangeSelection(true) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Clear button</div> <div class="dx-field-value"> @(Html.DevExtreme().DateRangeBox() .ShowClearButton(true) .Value(new JS("initialValue")) ) </div> </div> </div> <script> var msInDay = 1000 * 60 * 60 * 24; var now = new Date(); var initialValue = [ new Date(now.getTime() - msInDay * 3), new Date(now.getTime() + msInDay * 3), ]; var lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate(); var minValue = new Date(now.setDate(1)); var maxValue = new Date(now.setDate(lastDay)); function showSelectedDays({ value: [startDate, endDate] }) { let daysCount = 0; if (startDate && endDate) { daysCount = (endDate - startDate) / msInDay + 1; } $('#days-selected').text(daysCount); } $(function() { showSelectedDays({ value: initialValue }); }); </script>
using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class DateRangeBoxController : Controller { public ActionResult Overview() { return View(); } } }
.demo-container { height: 690px; } .dx-field { padding: 8px; } .selected-days-wrapper { font-size: 12px; opacity: 0.5; } .multiline-label { padding-top: 0; }

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.