ngHandsontable：日期格式在热列指令中不起作用

Posted 2023-03-22

【中文标题】ngHandsontable：日期格式在热列指令中不起作用

【英文标题】：ngHandsontable: date-format not working in hot-column directive

【发布时间】：2016-12-27 09:06:53

【问题描述】：

我尝试使用settings 以及直接date-format 属性来格式化日期列，如下所示。两者都不起作用。列类型设置为date，提供的数据类型为date。

    <hot-column data="createdAt" title="'Date'" type="'date'"
          settings="dateFormat:'DD/MM/YYYY', type: 'date'"
          date-format="'DD/MM/YYYY'"
          correct-format="true"
          allow-empty="true" read-only></hot-column>

日期列不会格式化。其他类型的格式，例如使用format-attribute 的严重性列中的numeric 类型正在工作。

完整的表格代码：

  <hot-table read-only datarows="events" class="table table-bordered table-striped" row-headers="false" manual-column-resize="true">

    <hot-column data="createdAt" title="'Date'" type="'date'"
          settings="dateFormat:'DD/MM/YYYY', type: 'date'"
          date-format="'DD/MM/YYYY'"
          correct-format="true"
          allow-empty="true" read-only></hot-column>

    <hot-column data="eventType" title="'Event Type'"></hot-column>
    <hot-column data="user.displayName" title="'User'"></hot-column>
    <hot-column data="ipAddress" title="'IP Address'"></hot-column>
    <hot-column data="severity" title="'Severity'" type="'numeric'" format="'$ 0,0.00'"></hot-column>
    <hot-column data="eventMessage" title="'Message'"></hot-column>
    <hot-column data="" title="'Old data'"></hot-column>
    <hot-column data="" title="'New data'"></hot-column>
  </hot-table>

使用 ngHandsontable 0.12.0、Handsontable 0.26.1。

很遗憾，没有一个demo 可以使用date-format 属性。

我目前的解决方法是使用自定义渲染器并通过其中的moment() 格式化日期。

【问题讨论】：

在此处创建票证：github.com/handsontable/ngHandsontable/issues/178

【参考方案1】：

根据https://github.com/handsontable/ngHandsontable/issues/178上的回答：

嗨@mathiasconradt，不幸的是日期格式不能在相同的情况下工作 方式比格式（对于数字）。这个问题与 Handsontable 本身，您可以跟踪更改here。

解决此问题的方法是在表格后调用 validateCells 方法 初始化。它将更正日期格式强制为另一种格式。我有 创建了演示here。

在视图中使用on-after-init：

<hot-table col-headers="true" datarows="ctrl.data" on-after-init="ctrl.onAfterInit">

和

  this.onAfterInit = function() 
    this.validateCells();
  

在控制器中。

【讨论】：

如何在此处添加最小日期....日期选择器不应接受 angular 中的未来日期。请帮助