DevExtreme v23.1 is now available.

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

Free Trial Buy

Control the Behavior

The DateRangeBox UI component allows users to type dates or pick them from a dropdown. The dropdown can display a single-month or two-month calendar. To use a single-month calendar, disable the multiView option. You can also specify whether date selection should take effect instantly or after a user clicks Done. Use the applyValueMode property.

jQuery
JavaScript
$(function() {
    $("#dateRangeBoxContainer").dxDateRangeBox({
        multiView: false,
        applyValueMode: "useButtons" // or "instantly"
    });
});
Angular
app.component.html
app.component.ts
<dx-date-range-box
    [multiView]="false"
    applyValueMode="useButtons" // or "instantly" 
></dx-date-range-box>
import { DxDateRangeBoxModule } from "devextreme-angular";

export class AppComponent {}

@NgModule({
    imports: [
        // ...
        DxDateRangeBoxModule
    ],
    // ...
})
Vue
App.vue (Options API)
App.vue (Composition API)
<template>
    <DxDateRangeBox
        :multi-view="false"
        apply-value-mode="useButtons" // or "instantly" 
    /> 
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDateRangeBox from 'devextreme-vue/date-range-box';

export default {
    components: {
        DxDateRangeBox
    },
}
</script>
<template>
    <DxDateRangeBox
        :multi-view="false"
        apply-value-mode="useButtons" // or "instantly" 
    /> 
</template>

<script setup>
import 'devextreme/dist/css/dx.light.css';

import DxDateRangeBox from 'devextreme-vue/date-range-box';
// ...
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import DateRangeBox from 'devextreme-react/date-range-box';

export default function App() { 
    return (
        <DateRangeBox
            multiView=false
            applyValueMode="useButtons" // or "instantly" 
        />
    );
}
See Also