在 Angular 2 和 Typescript 中创建 Date 扩展答案

【问题标题】：Create extension to Date in Angular 2 and Typescript在 Angular 2 和 Typescript 中创建 Date 扩展
【发布时间】：2017-01-24 08:56:12
【问题描述】：

使用内置日期类型，我可以调用 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);
 }

【问题讨论】：

时间选择器的值是如何传递给输入的，您必须规定您希望时间选择器的值进入输入，并且该方法是管道可以放置的地方应用。如果不显示更多代码。
您能描述一下您从头到尾要实现的目标吗？例如。 “让用户在弹出日历中选择一个日期，并将所选日期格式化为月份为字符串”。我不明白您为什么无法访问所选日期。
另外，为此创建一个类似乎有点矫枉过正。就像奥利弗说的那样，（定制）管道似乎是要走的路。无论如何，我永远不会使用switch... case 进行月份转换。只需创建一个简单的月份数组['Jan', 'Feb', 'Mar'...] 并使用索引来提取正确的月份，即months[date.getMonth()]。
数组似乎是个聪明的主意。我知道这是矫枉过正，因此我想看看是否有更好的方法。我不确定如何使用管道，因为我的 HTML 中没有变量可供我执行 {{ dateTime |日期：'longTime'}}。我已经更详细地更新了问题

标签： javascript date angular typescript

【解决方案1】：

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

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

{{ dateTime | date:'longTime' }}

会给你类似“2017 年 1 月 24 日”的内容

继续

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

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

【讨论】：