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

Posted 2023-05-07

【中文标题】更改 p-Calendar 传输的日期格式

【英文标题】：Changing the Date Format the p-Calendar Transfers

【发布时间】：2017-04-29 03:49:06

【问题描述】：

我有一个组件，p-Calendar。

我很容易找到一种方法来接收我选择的日期并对其进行修改。

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

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

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

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

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

【问题讨论】：

您是否尝试设置dateFormat？

@jonrsharpe 他显然是指在 (onSelect) 方法中，它接收 ISO 标准日期作为事件值。 plnkr.co/edit/IGRfXjtqIo0TEr2iDC06?p=preview 是我得到这个概念的方式，或者他的意思是他的 myDate 变量。

如果您在其他地方使用 myDate 变量进行显示，那么您可以使用日期管道。它绑定到Date，因此可以预期它的行为类似于Date 对象。

@jonrsharpe，我确实继续使用 dateFormat 参数。它并没有改变我收到的东西。

@silentsod，是的，这就是我要说的。我正在接收格式，但希望它接收 onselect 事件中实际显示的内容。我不是在谈论如何显示数据，我可以使用管道来显示视觉效果。我说的是传输到控制器的数据。

【参考方案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'