5

我有一个组件，p-Calendar。

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

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

所以基本上当我在日历中点击不同的日期时，它确实能正确地捕捉到日期。它将传输此信息：“Thu Dec 08 2016 00:00:00 GMT-0500（东部标准时间）”

虽然我可以看到所有这些细节都很有用，但我真的只想让我的组件收到：12/08/16。

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

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

4

1 回答 1

9

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

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

模板.html

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

组件.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'}}

于 2016-12-13T23:44:26.807 回答