将 api datetime 绑定到 angular 6 datepicker答案

【问题标题】：Binding api datetime to angular 6 datepicker将 api datetime 绑定到 angular 6 datepicker
【发布时间】：2019-05-10 03:29:26
【问题描述】：

我正在尝试将 SQL Server 数据库中的 DateTime 列绑定到 Angular Material DatePicker。每当 DatePicker 失去焦点时，它就会像无效一样突出显示红色。数据传输在两个方向上获取/设置，但它会出现错误。

基本功能是 C# API 返回 JSON 数据，如 { "endDate": "2019-01-16T00:00:00" }。 Angular 使用它并将其放入绑定到 mat-form-field 的模型中。 C# 数据类型是DateTime，SQL Server 数据类型也是。

我认为我的问题在于 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>

组件：

trainClass: ITrainClass = {} as ITrainClass;

界面：

export interface ITrainClass {
    endDate: Date;
}

任何帮助将不胜感激！

【问题讨论】：

如果它作为 proper DateTime 对象到达 C#，那么您可以排除它是 SQL Server 或 C# 问题。
不知道这是否有帮助：stackoverflow.com/questions/51514645/… 我在 stackblitz 中使用了你的示例，一切正常，除了我有一个建议的自动填充日期建议，即使它看起来正确（格式如 ' xx/xx/xxxx') 选择它时我会得到一个红色的轮廓。所以也许它与自动填充有关？

标签： c# sql-server angular

【解决方案1】：

经过更多测试，我想我找到了问题所在。红色轮廓与输入的 HTML 最大长度有关。

数据库中的绑定值采用 ISO 格式（“2019-04-28T00:00:00.000”）。该字段仅显示“04/28/2019”，但错误是因为底层数据是完整的 ISO 字符串，因此违反了最大长度。

为了解决这个问题，我将完整的 ISO 字符串截断为日期，然后绑定它。

【讨论】：