DevExtreme Angular - 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.

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
  • ],
  • // ...
  • })

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

See Also