All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Synchronize Two DateBoxes

DateBox widgets 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() {
    var startDate = $("#startDate").dxDateBox({
        value: new Date(),
        onValueChanged: function (e) {
            endDate.option("min", e.value);
        }
    }).dxDateBox("instance");
    var 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>
var viewModel = {
    startDate: ko.observable(new Date()),
    endDate: ko.observable(new Date()),
};
ko.applyBindings(viewModel);

Do not forget to call the getDate() method on the DateBox values when calculating the interval duration.

See Also