JavaScript/jQuery DateRangeBox - 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
Select one or more answers