在Angular 2和Typescript中创建Date的扩展

Question

使用内置日期类型，我可以调用Date.getDate()、Date.getMonth()等。但是，我想创建一种调用的方法

date.myCustomFunctionToGetMonthInString(date)，它以字符串格式返回月份，如"Jan"、"Feb"。。。等等。有没有办法建立这样的扩展？

目前我已经创建了一个CustomDate类，但这似乎有些过头了。

export class CustomDate {
day: number;
month: number;
year: number;
customDateString: string;
constructor(date: Date) {
this.day = date.getDate();
this.month = date.getMonth();
this.year = date.getFullYear();
var month_str: string;
switch (date.getMonth()) {
case 0:
month_str = 'Jan';
break;
case 1:
month_str = 'Feb';
break;
case 2:
month_str = 'Mar';
break;
case 3:
month_str = 'Apr';
break;
case 4:
month_str = 'May';
break;
case 5:
month_str = 'Jun';
break;
case 6:
month_str = 'Jul';
break;
case 7:
month_str = 'Aug';
break;
case 8:
month_str = 'Sep';
break;
case 9:
month_str = 'Oct';
break;
case 10:
month_str = 'Nov';
break;
case 11:
month_str = 'Dec';
break;
default:
month_str = 'Some Error';
}
this.customDateString = date.getDate().toString() + ' ' + month_str + ' ' + date.getFullYear().toString();
}

我有一个只读输入字段。当用户单击输入时，会出现一个日历，在输入字段中填充所选内容。因此，我无法直接访问HTML中的"选定日期"。所以我不确定如何在这里实现管道(我也想知道如何创建扩展，即使管道是可行的)。

这是感兴趣的HTML代码。

<label>Start Time</label>
<input (focus)="toggleTimePicker(true)" readonly class="form-control" formControlName="startTime" />
<time-picker *ngIf="showTimePicker" [showSecond]="false" (onTimePickerCancel)="toggleTimePicker($event)" (onSelectTime)="setTime($event)"></time-picker>

只读输入触发一个函数来激活时间选择器。用户从选择器中选择后，将触发setTime($event)。当触发时，只读输入字段将使用以下方法填充日期和时间

this.myForm.controls['startTime'].setValue(dateTime) 

因此，我无法访问HTML代码中的日期，因为我没有使用ngModel(我的表单是Reactive，所以我避免使用ngModel)

<label>Start Time</label>
<input (focus)="toggleTimePicker(true)" readonly class="form-control" formControlName="startTime" />
<time-picker *ngIf="showTimePicker" [showSecond]="false" (onTimePickerCancel)="toggleTimePicker($event)" (onSelectTime)="setTime($event)"></time-picker>
setTime(dateTime: Date): void {
console.log(dateTime.getHours());
console.log(dateTime.getMinutes());
this.myForm.controls['startTime'].setValue(dateTime);
}     

Answer 1

我建议查看日期管道，后端的日期应该以标准日期格式存储，在向用户显示时应该只关心格式，管道很好，因为它在显示方式上提供了很大的灵活性。看这里

只要插入值以向用户显示，就可以添加该管道并规定格式。

{{ dateTime | date:'longTime' }}

会给你一些像"2017年1月24日">

继续

您应该能够在代码隐藏中使用这个管道。

this.customDateString = new DatePipe().transform(dateTime, //your format);