DevExtreme jQuery/JS - Control the Behavior

The DateBox widget allows an end user to pick or type a value. To specify whether the value should be applied instantly or when a user clicks the Done button, set the applyValueMode option. Note that this option takes effect only when the pickerType is "calendar" or "list".

jQuery
JavaScript
$(function() {
    $("#dateBoxContainer").dxDateBox({
        value: new Date(),
        type: "date",
        pickerType: "calendar",
        applyValueMode: "useButtons" // or "instantly"
    });
});
Angular
HTML
TypeScript
<dx-date-box
    [(value)]="date"
    type="date"
    pickerType="calendar"
    applyValueMode="useButtons"> <!-- or "instantly" -->
</dx-date-box>
import { DxDateBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    date: Date = new Date()
}
@NgModule({
    imports: [
        // ...
        DxDateBoxModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDateBox
        :value="date"
        type="date"
        picker-type="calendar",
        apply-value-mode="useButtons"/> <!-- or "instantly" -->
</template>

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

import DxDateBox from 'devextreme-vue/date-box';

export default {
    components: {
        DxDateBox
    },
    data() {
        return {
            date: new Date()
        };
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DateBox from 'devextreme-react/date-box';

class App extends React.Component {
    constructor(props) {
        constructor(props);

        this.date = new Date();
    }

    render() {
        return (
            <DateBox
                defaultValue={this.date}
                type="date"
                pickerType="calendar"
                applyValueMode="useButtons" {/* or "instantly" */}
            />
        );
    }
}
export default App;
See Also