更改 p-Calendar 传输的日期格式

Question

我有一个组件，p-Calendar。

我毫不费力地找到了接收我选择的日期并对其进行修改的方法。

<p-calendar 
                [showIcon]="true"
                (onSelect)="onSelectMethod($event)"
                [(ngModel)]="myDate"
                [dataType]="date"
                >
</p-calendar>

所以基本上，当我在日历中点击不同的日期时，它会正确地捕捉到日期。它将传输此信息： "Thu Dec 08 2016 00:00:00 GMT-0500 (Eastern Standard Time)"

虽然我可以看到所有这些细节都很有用，但我真的只想让我的组件接收： 2016 年 12 月 8 日。

是否有任何简单的方法可以做到这一点，也许是日历附带的一些固有方法，而无需在我的代码中手动修改字符串？我阅读了文档，但找不到我要查找的信息。

onBlur 方法似乎以我想要的方式传输数据。不幸的是，onBlur 仅在您手动输入日期或您落后一个日期选择时才有效。在日历下拉列表中进行选择后，以某种方式调用 PrimeNG 的 onBlur 方法会很棒。

Answer 1

我不会特别推荐这个，因为它是一个 hacky 解决方案，最好根据显示或其他目的对 myDate 进行适当的转换。

如果您真的非常想这样做，以便组件中的 myDate 仅包含一个短日期而没有所有时间和位置信息，您可以继续并分离出模型绑定以使其成为可能像这样工作：

template.html

<p-calendar [ngModel]="myDate"
            (onSelect)="onSelectMethod($event)"
            [dataType]="date">
</p-calendar>

component.ts

onSelectMethod(event) {
  let d = new Date(Date.parse(event));
  this.myDate = `${d.getMonth()+1}/${d.getDate()}/${d.getFullYear()}`;
}

这是一个功能演示：http://plnkr.co/edit/IGRfXjtqIo0TEr2iDC06?p=preview

如果您想知道如何应用管道，您可以直接 [(ngModel)]="myDate" 绑定，并且，如果您想在模板中查看短日期，请执行 {{myDate | date: 'MM/dd/yy'}}

更改 p-Calendar 传输的日期格式

Changing the Date Format the p-Calendar Transfers

calendar

date

onselect

primeng

angular