Question

我在表单中使用日期选择器，并将其值保存到数据库中。该值以以下格式保存：2019-08-22T23:00:00。我正在从数据库中取回这些值，并使用ngModel将它们绑定为表单输入，但是在将日期绑定到日期选择器时遇到了问题。

这是我的HTML：

<mat-form-field>
   <input matInput [matDatepicker]="picker" placeholder="Date of birth" 
   [ngModel]="user.dob | date " name='dob'>
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

我将上述值发送到mysql数据库。我注意到当我选择一个日期如2019年8月23日时，它将以2019-08-22T23:00:00格式返回22nd。当我从数据库取回数据并尝试将其绑定到上面的日期类型输入字段时，它没有绑定。如何使日期选择器返回所选日期，以及如何将日期绑定为日期dd-mm-yy。谢谢。

Answer 1

最简单的方法是使用表单控件。可以将其绑定到value字段或formControl字段，即：

@Component({
  selector: 'datepicker-value-example',
  templateUrl: 'datepicker-value-example.html',
  styleUrls: ['datepicker-value-example.css'],
})
export class DatepickerValueExample {
  date = new FormControl('2019-08-22T23:00:00');
}

AppComponent.ts

<mat-form-field>
  <input matInput [matDatepicker]="picker1" placeholder="Angular forms" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

<mat-form-field>
  <input matInput [matDatepicker]="picker3" placeholder="Value binding" [value]="date.value">
  <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
  <mat-datepicker #picker3></mat-datepicker>
</mat-form-field>

AppComponent.html

您可以在这里看到有效的闪电战：https://stackblitz.com/edit/angular-umwtzi?file=app%2Fdatepicker-value-example.html

或更重要的文档中的更多文档和示例：https://material.angular.io/components/datepicker/examples

如何格式化角度垫日期选择器的值

1 个答案: