首页 文章

Datepicker不显示日期格式MM / DD / YYYY angular 4

提问于
浏览 次
0

在我的角度4项目中，我的html中有一个日期选择器 .

在html中：

<mat-form-field class="col-sm-12 nopadding pull-left">
         <input matInput [matDatepicker]="date" placeholder="Please select a date" [(ngModel)]="txtDate">
         <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
         <mat-datepicker #date></mat-datepicker>
      </mat-form-field>

我能够在我的数据库中选择日期并将其转换为dd / mm / yyyy格式 . 当我检索日期时我将它转换回MM / DD / YYYY（我的datepicker工作的格式）我从web api获取值并在控制台中我可以看到值被正确转换并分配给ngModel . 但它没有显示在datepicker字段中

在ts文件中

var dateParts = result.Date.split("/");
 var dateObject = new Date(dateParts [2], dateParts [1] - 1, dateParts [0]);
 this.txtDate=moment(dateObject ).format('MM/DD/YYYY'); -- output of this in console is 11/14/2018 (the desired output)

但同样没有在日期选择器中显示 . 你能帮忙!!

angular datepicker

2 回答

  • 1

    我宁愿建议你创建一个自定义管道：

    [(ngModel)]="txtDate | dateformatter:'MM/DD/YYYY'"

    import {
  Pipe,
  PipeTransform
} from '@angular/core';

@Pipe({ name: 'dateformatter' })
export class DateFormatterPipe implements PipeTransform {
  transform(value: number, dateformat: string): string {
    var dateParts = result.Date.split("/");
    var dateObject = new Date(dateParts [2], dateParts [1] - 1, dateParts [0]);
    return moment(dateObject).format(dateformat.toUpperCase());
  }
}

    或者你可以看一下 date 管道：

    [(ngModel)]="txtDate | date:'shortDate'"
    回复于
  • 0

    由于没有提供最小的可重现代码，我刚刚浏览了 Angular Material 文档，发现您需要将日期转换为ISOString格式 . 这是来自stackbliz的代码

    回复于

相关问题