Search code examples
angularjsangularjs-directivehandsontabledate-formatting

ngHandsontable: date-format not working in hot-column directive

I try to format a date column as follows, both with the settings as well as the direct date-format attribute. Neither works. The column type is set to date and the provided data is of type 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>

The date column would just not format. Other kinds of formatting, such as numeric types in the Severity column using format-attribute are working.

enter image description here

Complete table code:

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

Using ngHandsontable 0.12.0, Handsontable 0.26.1.

Unfortunately there is not a single demo available using the date-format attribute.

My current workaround is to use a custom renderer and format the date via moment() in there.

Solution

  • According to the answers on https://github.com/handsontable/ngHandsontable/issues/178:

    Hi @mathiasconradt, unfortunately date-format doesn't work in the same manner than format (for numbers). This issue is related with Handsontable itself and you can track changes here.

    Workaround for this issue is call validateCells method after table initialization. It forces the correction date format to another. I've created demo here.

    Use on-after-init in the view:

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

    and

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

    in the controller.