All docs
V23.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

jQuery DateBox - Control the Behavior

The DateBox UI component 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 property. Note that this property 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.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.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