Handsontable中的日期格式

Posted 2023-03-22

【中文标题】Handsontable中的日期格式

【英文标题】：Date formating in handson table

【发布时间】：2020-09-22 00:52:57

【问题描述】：

我在我的 Angular 项目中使用 handson table lib。有一个日期列，我希望日期在表的初始化时像 DD/MM/YYYY 那样格式化，但不幸的是，即使我在 Angular 的钩子中调用 afterRender()（在视图初始化之后和视图检查之后），也没有发生任何事情它告诉我不能渲染未定义，所以此时表未定义。 那么解决方案是什么？ 这是 afterRender 方法

private afterRender( ) 
  console.log("rendere")
  this.hotRegisterer.getInstance(this.idTableau).render();
  this.hotRegisterer.getInstance(this.idTableau).validateCells();

这是我的设置

hotSettings: Handsontable.GridSettings = 
  height: MajStockComponent.HANDSON_TABLE_HEIGHT,
  width: MajStockComponent.HANDSON_TABLE_WIDTH,
  stretchH: 'all',
  rowHeaderWidth: MajStockComponent.HANDSON_TABLE_ROW_HEADER_WIDTH,
  colWidths: MajStockComponent.HANDSON_TABLE_COL_WIDTH,
  colHeaders: MajStockComponent.HANDSON_TABLE_IS_COL_HEADER,
  licenseKey: ConstantesNuc.LICENCE_KEY_TABLE_HANDSOME_TABLE,
  language: ConstantesNuc.HANDSOME_FR,
  columns: [
    
      data: "code",
      type: 'text',
      readOnly: true
    ,
    
      data: "num",
      type: 'text',
      readOnly: true
    ,
    
      data: "date",
      type: 'date',
      readOnly: true,
      dateFormat: 'DD/MM/YYYY',
      correctFormat: true,
    ,
  ],
  nestedHeaders: [
    [
      label: '',
      colspan: 3
    ],
    ['Code ', 'Num ', 'Date']
  ],
  afterLoadData: (bool) => 
    this.afterRender();
  ,

【问题讨论】：

使用moment.js

我如何在这里使用它？

对数据格式使用简单的角度日期管道：angular.io/api/common/DatePipe

【参考方案1】：

您好，您已经为您的日期单元格进行了自定义单元格渲染。

 columns: [
    
      data: "code",
      type: 'text',
      readOnly: true
    ,
    
      data: "num",
      type: 'text',
      readOnly: true
    ,
    
      data: "date",
      type: 'date',
      readOnly: true,
      renderer: function(instance, td, row, col, prop, value, cellProperties) 
      dateCell = value,  // format your date value with custom pipe.
      return dateCell;
      
    ,
  ],

【讨论】：

如果我要使用管道，它必须在构造函数中贴花，但我不能在渲染器中调用 this.datePipe