日期选择器不显示日期格式MM / DD / YYYY角度4 [英] Datepicker not displaying date format MM/DD/YYYY angular 4
问题描述
在我的angular 4项目中,我的html中有一个日期选择器。
In my angular 4 project, I have a datepicker in my 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>
我可以选择日期并将其转换为DB中的dd / mm / yyyy格式。当我检索日期时,将其转换回MM / DD / YYYY(我的日期选择器工作的格式)时,我从Web api获取了值,并且在控制台中,我可以看到该值已正确转换并分配给ngModel。但它不会显示在datepicker字段中
Im able to select date and convert it into dd/mm/yyyy format in my DB. When i retrieve date im converting it back to MM/DD/YYYY (the format in which my datepicker works) I am getting the value from web api and in console i can see the value is converted correctly and assigned to the ngModel. But its not displaying in the datepicker field
在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)
但相同没有显示在日期选择器中。
您能帮忙吗!
but the same is not displaying in date-picker. can you please help!!
推荐答案
我宁愿建议您创建自定义管道:
I would rather suggest you to create a custom pipe:
[(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'"
这篇关于日期选择器不显示日期格式MM / DD / YYYY角度4的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!