Date Range Box - Overview

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

​