Search code examples
angulartypescriptdata-bindingdevextreme

Type 'string | number | Date' is not assignable to type 'Date' when trying to bind to dx-date-box


I'm trying to have a Datebox that is two way bound to the typescript of the component. In this example it seems to work, but I can't tell what I'm missing that would make mine work.

HTML Snippet:

<dx-box direction="row" width="100%" height="75">
  <dxi-item ratio="3">
    <dx-date-box type="date" [(value)]="startDate" [min]="min" [max]="now"></dx-date-box>
  </dxi-item>
</dx-box>

Typescript (Simplified):

export class MyComponent {
  startDate: Date = new Date();
  min: Date = new Date(1900, 0, 1);
  now: Date = new Date();
}

I'm not shown any errors while I'm not running the code, it only appears when I serve the code, and only for startDate which is (in theory) two-way bound:

Error Message

(I removed the filepath since it shouldn't really matter and I'm self conscious about my naming decisions xD)


Solution

  • I was able to get around the issue by defining multiple types for the startDate variable using union;

      startDate: (string | number | Date) = new Date();
    

    I'd love to hear other solutions however as this doesn't feel very clean.