如何在Angular 5的Handsontable中添加无日期的时间选择器？

嘿，我刚好处理过类似的需求！Handsontable原生确实没有专门的仅时间选择器列，但咱们可以通过自定义编辑器和渲染器来实现，完全适配Angular 5项目，下面一步步来：

步骤1：自定义时间编辑器（Editor） #

编辑器负责在单元格进入编辑状态时弹出时间选择器，我们可以基于Handsontable的BaseEditor扩展，用原生HTML5的<input type="time">来实现轻量版的时间选择：

import { BaseEditor } from 'handsontable/editors/baseEditor';

export class TimeEditor extends BaseEditor {
  private timeInput: HTMLInputElement;

  init() {
    // 创建原生time输入框
    this.timeInput = document.createElement('input');
    this.timeInput.type = 'time';
    this.timeInput.className = 'htInput';
    // 绑定输入事件，同步到表格数据
    this.timeInput.addEventListener('change', () => {
      this.finishEditing();
    });
    this.TEXTAREA = this.timeInput;
    this.cellProperties.element.appendChild(this.timeInput);
  }

  prepare(row: number, col: number, prop: string | number, td: HTMLElement, originalValue: any, cellProperties: any) {
    super.prepare(row, col, prop, td, originalValue, cellProperties);
    // 设置初始值，确保格式符合time输入要求（HH:mm）
    this.timeInput.value = originalValue || '';
  }

  getValue() {
    return this.timeInput.value;
  }

  setValue(value: string) {
    this.timeInput.value = value;
  }
}

步骤2：自定义时间渲染器（Renderer） #

渲染器负责在单元格非编辑状态下，把时间值格式化成友好的显示样式（比如确保显示两位小时和分钟）：

import { BaseRenderer } from 'handsontable/renderers/baseRenderer';

export class TimeRenderer extends BaseRenderer {
  render(TD: HTMLElement, row: number, col: number, prop: string | number, value: any, cellProperties: any) {
    super.render(TD, row, col, prop, value, cellProperties);
    // 格式化时间值，空值显示占位符
    const displayValue = value ? value : '--:--';
    TD.textContent = displayValue;
    // 可选：添加样式优化显示
    TD.style.textAlign = 'center';
  }
}

步骤3：在Angular组件中配置Handsontable #

接下来在你的Angular组件里，把自定义的编辑器和渲染器绑定到表格列上：

首先确保你已经安装了@handsontable/angular的对应版本（Angular 5建议用^3.0.0），然后在组件代码里：

import { Component } from '@angular/core';
import { TimeEditor } from './time-editor';
import { TimeRenderer } from './time-renderer';

@Component({
  selector: 'app-time-table',
  template: `
    <hot-table [settings]="hotSettings"></hot-table>
  `
})
export class TimeTableComponent {
  hotSettings = {
    data: [
      ['任务1', '09:30'],
      ['任务2', '14:15'],
      ['任务3', '']
    ],
    columns: [
      { data: 0, title: '任务名称' },
      { 
        data: 1, 
        title: '开始时间',
        editor: TimeEditor,  // 指定自定义编辑器
        renderer: TimeRenderer,  // 指定自定义渲染器
        allowInvalid: false  // 禁止输入不符合时间格式的值
      }
    ],
    rowHeaders: true,
    colHeaders: true
  };
}

额外优化：使用第三方时间选择器（可选） #

如果原生的time输入样式不符合你的需求，也可以集成Angular 5兼容的第三方组件，比如ngx-bootstrap的Timepicker。核心思路是在自定义编辑器中手动创建Angular组件实例，挂载到表格单元格中，并处理数据同步：

1. 先安装ngx-bootstrap的对应版本（Angular 5用^2.0.0）
2. 在自定义编辑器的init方法中，通过Angular的ComponentFactoryResolver创建Timepicker组件
3. 绑定组件的时间值到表格数据，并处理组件的事件来完成编辑

这种方式需要额外处理Angular组件的生命周期，但能获得更美观的UI。

内容的提问来源于stack exchange，提问作者Harish