javascript - 在 Angular 2 和 Typescript 中创建日期扩展

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(我的表单是响应式的，所以我避免使用 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

我建议查看日期管道，后端中的日期应以标准日期格式存储，您应该只关心向用户显示时的格式，管道很好，因为它提供了很大的灵 active 它被显示了。看here

无论您在何处插入值以向用户显示，您都可以添加此管道并规定格式。

{{ dateTime | date:'longTime' }}

会给你类似“2017 年 1 月 24 日”的信息

继续

您也应该能够在后面的代码中使用此管道。

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