jQuery DateBox - Synchronize Two DateBoxes
DateBox UI components are often coupled for selecting a date interval. In this case, you need to synchronize the DateBoxes to prevent a user from selecting an interval whose start date is later than the end date. For this, limit one DateBox's range depending on the other's value as shown in the example below.
jQuery
JavaScript
HTML
$(function() {
const startDate = $("#startDate").dxDateBox({
value: new Date(),
onValueChanged: function (e) {
endDate.option("min", e.value);
}
}).dxDateBox("instance");
const endDate = $("#endDate").dxDateBox({
value: new Date(),
onValueChanged: function (e) {
startDate.option("max", e.value);
}
}).dxDateBox("instance");
});<div id="startDate"></div> <div id="endDate"></div>
Angular
HTML
TypeScript
<dx-date-box
[(max)]="endValue"
[(value)]="startValue">
</dx-date-box>
<dx-date-box
[(min)]="startValue"
[(value)]="endValue">
</dx-date-box>
import { DxDateBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
startValue: Date = new Date();
endValue: Date = new Date();
}
@NgModule({
imports: [
// ...
DxDateBoxModule
],
// ...
})AngularJS
HTML
JavaScript
<div dx-date-box="{
bindingOptions: {
max: 'endValue'
value: 'startValue'
}
}"></div>
<div dx-date-box="{
bindingOptions: {
min: 'startValue'
value: 'endValue'
}
}"></div>function Controller($scope) {
$scope.startValue = new Date();
$scope.endValue = new Date();
}Knockout
HTML
JavaScript
<div data-bind="dxDateBox: {
max: endValue
value: startValue
}"></div>
<div data-bind="dxDateBox: {
min: startValue
value: endValue
}"></div>const viewModel = {
startDate: ko.observable(new Date()),
endDate: ko.observable(new Date()),
};
ko.applyBindings(viewModel);Vue
<template>
<div>
<DxDateBox
v-model:value="startValue"
v-model:max="endValue"
/>
<DxDateBox
v-model:value="endValue"
v-model:min="startValue"
/>
</div>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxDateBox from 'devextreme-vue/date-box';
export default {
components: {
DxDateBox
},
data() {
return {
startValue: new Date(),
endValue: 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) {
this.super(props);
this.state = {
startValue: new Date(),
endValue: new Date()
};
this.minChangeHandler = this.minChangeHandler.bind(this);
this.maxChangeHandler = this.maxChangeHandler.bind(this);
}
minChangeHandler = function(e) {
this.setState({ startValue: e.value });
}
maxChangeHandler = function(e) {
this.setState({ endValue: e.value });
}
render() {
return (
<div>
<DateBox
value={this.state.startValue}
max={this.state.endValue}
onValueChanged={this.minChangeHandler}
/>
<DateBox
value={this.state.endValue}
min={this.state.startValue}
onValueChanged={this.maxChangeHandler}
/>
</div>
);
}
}
export default App;Do not forget to call the getDate() method on the DateBox values when calculating the interval duration.
See Also
- Configure a UI Component: Angular | Vue | React | jQuery | AngularJS | Knockout
- DateBox - Specify Value Range
- DateBox - Handle the Value Change Event
- DateBox API Reference
Feedback