更改日历格式p-Calendar转移

Question

我有一个组件,p-Calendar.

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

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

所以基本上当我在日历中点击不同的日期时,它确实正确地捕捉了日期.它将传输此信息:"2016年12月8日星期四00:00:00 GMT-0500(东部标准时间)"

虽然我可以看到所有这些细节都很有用,但我真的只想要我的组件:12/08/16.

有没有简单的方法来做到这一点,也许是日历附带的一些固有方法,而不是在我的代码中手动修改字符串？我阅读了文档,找不到我要查找的信息.

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'}}