0

I am trying to bind a DateTime column from a SQL Server database to an Angular Material DatePicker. Whenever the DatePicker loses focus, it highlights red like it is invalid. The data transfer gets/sets in both directions, but it gives the appearance of an error.

Basic function is that a C# API returns JSON data like { "endDate": "2019-01-16T00:00:00" }. Angular consumes that and puts it into a model that's bound to the mat-form-field. The C# data type is DateTime as is the SQL Server data type.

I think that my problem lies in the date format between SQL Server / C# / Angular

HTML

<mat-form-field appearance="outline" style="width:200px">
    <mat-label>End Date</mat-label>
    <input matInput [matDatepicker]="endPicker" placeholder="Choose a date" [(ngModel)]="trainClass.endDate" name="endDate">
    <mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
    <mat-datepicker #endPicker></mat-datepicker>
</mat-form-field>

Component:

trainClass: ITrainClass = {} as ITrainClass;

Interface:

export interface ITrainClass {
    endDate: Date;
}

Any help would be appreciated!

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
John Rousseau
  • 85
  • 8
  • If its arriving in C# as a *proper* `DateTime` object then you can ruleout it being a SQL Server or C# issue. – Dale K May 10 '19 at 03:58
  • Don't know if this might help: https://stackoverflow.com/questions/51514645/angular-material-datepicker-autocomplete I used your example in stackblitz and everything worked fine, except I had a suggested autofill date suggestion, and even though it looked correct (format like 'xx/xx/xxxx') I would get a red outline when selecting it. So maybe it has to do with autofill? – Jojofoulk May 10 '19 at 04:05

1 Answers1

0

After more testing, I think I found the issue. The red outline was related to HTML max length on the input.

The bound value from the database was in ISO format ("2019-04-28T00:00:00.000"). The field only showed the "04/28/2019", but the error was because the underlying data was the full ISO string, thus violating the max length.

To solve the problem, I truncated the full ISO string to just be the date, then bound it.

John Rousseau
  • 85
  • 8