JavaScript/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.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
Feedback