Angular-Material 在 Angular7 中将 Datepicker 设置为仅日期答案

【问题标题】：Angular-Material set a Datepicker to only date in Angular7Angular-Material 在 Angular7 中将 Datepicker 设置为仅日期
【发布时间】：2019-09-22 19:04:34
【问题描述】：

我将 Angular-7 用于 Web 门户应用程序。我有一个 Material Datepicker，我只想从中获取没有时间戳的日期。它也应该是这种格式：dd/mm/yyyy

这是它在前端的显示方式：

<div class="col-xs-6">
  <label for="loading_date">Loading Date</label>
  <div class="input-group date">
    <mat-form-field>
      <input matInput [matDatepicker] = "picker" placeholder = "Choose a date" name="loading_date" [(ngModel)]="quoteModel.loading_date" #loading_date="ngModel" [ngClass]="{'is-invalid' : loading_date.invalid && ((loading_date.dirty || loading_date.touched) || quoteform.submitted)}"   required>
     <mat-datepicker-toggle matSuffix [for] = "picker"></mat-datepicker-toggle>
     <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
  <div class="form-feedback" *ngIf="loading_date.invalid && ((loading_date.dirty || loading_date.touched) || quoteform.submitted)">
  <div style="color:red;" *ngIf="loading_date.errors?.required"class="alert alert-danger">Loading Date is required.</div>
  </div>
  </div>
</div>

I 当我提交到数据库时，我想得到这种格式的结果：

2019-09-26

但这就是我得到的：

2019-09-26T23:00:00.000Z

我如何做到这一点？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您可以使用moment 来实现；

npm i moment --save

试试这个

var dateToDB = moment(loading_date).format("YYYY-MM-DD");

或者你可以使用 DatePipe

@Injectable()
import { DatePipe } from '@angular/common';
class MyService {

  constructor(private datePipe: DatePipe) {}

  transformDate(date) {
    var dateToDBthis.datePipe.transform(date, 'yyyy-MM-dd'); 
  }
}

在您的 app.module.ts 中

providers: [DatePipe,...]

【讨论】：