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.

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.

Default functionality

Days selected:

Custom format

Use buttons to apply selection

Single-calendar view

Calendar only appears on icon click

Limit available dates (this month)

Disable out of range selection

Clear button

<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;
}