React 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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.