Question

我有一个组件，p-Calendar。

我找到了一种方法来接收我选择的日期并修改它。

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

所以基本上当我在日历中点击不同的日期时，它会正确捕捉日期。它将传输此信息：＆＃34; 2016年12月8日星期四00:00:00 GMT-0500（东部标准时间）＆＃34;

虽然我可以看到所有这些细节都很有用，但我真的只想让我的组件接收： 16年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转移

1 个答案: