Moment.js-based time

This tutorial shows you how to create a custom time cell type using Moment.js for validation and format auto-correction.

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';
4
import moment from 'moment';
5
import { getRenderer } from 'handsontable/renderers';
6
import { getEditor } from 'handsontable/editors';
7
import { registerCellType } from 'handsontable/cellTypes';
8

9
const cellTimeTypeDefinition = {
10
  CELL_TYPE: 'moment-time',
11
  renderer: getRenderer('text'),
12
  validator(this: any, value: any, callback: (valid: boolean) => void): void {
13
    const timeFormat = this.timeFormat ?? 'h:mm:ss a';
14
    let valid = true;
15

16
    if (value === null) {
17
      value = '';
18
    }
19

20
    value = /^\d{3,}$/.test(value) ? parseInt(value, 10) : value;
21

22
    const twoDigitValue = /^\d{1,2}$/.test(value);
23

24
    if (twoDigitValue) {
25
      value += ':00';
26
    }
27

28
    const date = moment(
29
      value,
30
      ['YYYY-MM-DDTHH:mm:ss.SSSZ', 'X', 'x'],
31
      true
32
    ).isValid()
33
      ? moment(value)
34
      : moment(value, timeFormat);
35

36
    let isValidTime = date.isValid();
37
    let isValidFormat = moment(value, timeFormat, true).isValid() && !twoDigitValue;
38

39
    if (this.allowEmpty && value === '') {
40
      isValidTime = true;
41
      isValidFormat = true;
42
    }
43

44
    if (!isValidTime) {
45
      valid = false;
46
    }
47

48
    if (!isValidTime && isValidFormat) {
49
      valid = true;
50
    }
51

52
    if (isValidTime && !isValidFormat) {
53
      if (this.correctFormat === true) {
54
        const correctedValue = date.format(timeFormat);
55

56
        this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'timeValidator');
57
        valid = true;
58
      } else {
59
        valid = false;
60
      }
61
    }
62

63
    callback(valid);
64
  },
65
  editor: getEditor('text'),
66
};
67

68
registerCellType('moment-time', cellTimeTypeDefinition);
69

70
@Component({
71
  standalone: true,
72
  imports: [HotTableModule],
73
  selector: 'example1-moment-time',
74
  template: `<div><hot-table [data]="data" [settings]="gridSettings"></hot-table></div>`,
75
})
76
export class AppComponent {
77
  readonly data = [
78
    {
79
      itemName: 'Lunar Core',
80
      category: 'Lander',
81
      leadEngineer: 'Ellen Ripley',
82
      time: '09:30',
83
      cost: 350000,
84
    },
85
    {
86
      itemName: 'Zero Thrusters',
87
      category: 'Propulsion',
88
      leadEngineer: 'Sam Bell',
89
      time: '14:15',
90
      cost: 450000,
91
    },
92
    {
93
      itemName: 'EVA Suits',
94
      category: 'Equipment',
95
      leadEngineer: 'Alex Rogan',
96
      time: '08:00',
97
      cost: 150000,
98
    },
99
    {
100
      itemName: 'Solar Panels',
101
      category: 'Energy',
102
      leadEngineer: 'Dave Bowman',
103
      time: '16:45',
104
      cost: 75000,
105
    },
106
    {
107
      itemName: 'Comm Array',
108
      category: 'Communication',
109
      leadEngineer: 'Louise Banks',
110
      time: '11:20',
111
      cost: 125000,
112
    },
113
    {
114
      itemName: 'Habitat Dome',
115
      category: 'Shelter',
116
      leadEngineer: 'Dr. Ryan Stone',
117
      time: '23:00',
118
      cost: 1000000,
119
    },
120
  ];
121

122
  readonly gridSettings: GridSettings = {
123
    colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Arrival Time', 'Cost'],
124
    autoRowSize: true,
125
    rowHeaders: true,
126
    height: 'auto',
127
    width: '100%',
128
    autoWrapRow: true,
129
    headerClassName: 'htLeft',
130
    columns: [
131
      { data: 'itemName', type: 'text', width: 130 },
132
      { data: 'category', type: 'text', width: 120 },
133
      { data: 'leadEngineer', type: 'text', width: 150 },
134
      {
135
        data: 'time',
136
        type: 'moment-time' as any,
137
        width: 150,
138
        timeFormat: 'HH:mm',
139
        correctFormat: true,
140
      } as any,
141
      {
142
        data: 'cost',
143
        type: 'numeric',
144
        width: 120,
145
        className: 'htRight',
146
        locale: 'en-US',
147
        numericFormat: {
148
          style: 'currency',
149
          currency: 'USD',
150
          minimumFractionDigits: 2,
151
        },
152
      },
153
    ],
154
  };
155
}
156
/* end-file */
157

158
/* file: app.config.ts */
159
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
160
import { registerAllModules } from 'handsontable/registry';
161
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
162

163
registerAllModules();
164

165
export const appConfig: ApplicationConfig = {
166
  providers: [
167
    provideZoneChangeDetection({ eventCoalescing: true }),
168
    {
169
      provide: HOT_GLOBAL_CONFIG,
170
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
171
    },
172
  ],
173
};
174
/* end-file */

1
<div>
2
  <example1-moment-time></example1-moment-time>
3
</div>

Overview

This guide shows how to create a custom time cell type using the Moment.js library. Users can format times using the Moment.js API.

Difficulty: Beginner Time: ~15 minutes Libraries: moment

What You’ll Build

A cell that:

Displays time values as formatted text
Accepts timeFormat options for customization (e.g., HH:mm, h:mm:ss a)
Validates time input using Moment.js
Auto-corrects time format when correctFormat is enabled

Prerequisites

1
npm install moment

Import Dependencies

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { getRenderer } from 'handsontable/renderers';
4
import { getEditor } from 'handsontable/editors';
5
import { registerCellType } from 'handsontable/cellTypes';
6
import moment from 'moment';
7

8
registerAllModules();

Why this matters:

moment handles time parsing, validation, and formatting
getRenderer('text') and getEditor('text') reuse Handsontable’s built-in text renderer and editor
registerCellType registers the custom cell type for use in column config

Create the Renderer

The example reuses the built-in text renderer, which displays the time value as plain text:
```
1
renderer: getRenderer('text')
```

Create the Validator

The validator parses the input using Moment.js and checks it against the configured timeFormat. It handles Unix timestamps, two-digit shorthand (e.g., 9 becomes 9:00), and auto-correction:

1
validator: function(value, callback) {
2
  const timeFormat = this.timeFormat ?? 'h:mm:ss a';
3
  let valid = true;
4

5
  if (value === null) {
6
    value = '';
7
  }
8

9
  value = /^\d{3,}$/.test(value) ? parseInt(value, 10) : value;
10

11
  const twoDigitValue = /^\d{1,2}$/.test(value);
12

13
  if (twoDigitValue) {
14
    value += ':00';
15
  }
16

17
  const date = moment(value, [
18
    'YYYY-MM-DDTHH:mm:ss.SSSZ',
19
    'X', // Unix timestamp
20
    'x' // Unix ms timestamp
21
  ], true).isValid() ?
22
    moment(value) : moment(value, timeFormat);
23
  let isValidTime = date.isValid();
24

25
  // is it in the specified format
26
  let isValidFormat = moment(value, timeFormat, true).isValid() && !twoDigitValue;
27

28
  if (this.allowEmpty && value === '') {
29
    isValidTime = true;
30
    isValidFormat = true;
31
  }
32
  if (!isValidTime) {
33
    valid = false;
34
  }
35
  if (!isValidTime && isValidFormat) {
36
    valid = true;
37
  }
38
  if (isValidTime && !isValidFormat) {
39
    if (this.correctFormat === true) {
40
      const correctedValue = date.format(timeFormat);
41

42
      this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'timeValidator');
43
      valid = true;
44
    } else {
45
      valid = false;
46
    }
47
  }
48

49
  callback(valid);
50
}

What’s happening:

Converts numeric-only input (3+ digits) to integers for Unix timestamp parsing
Appends :00 to 1-2 digit values (e.g., 9 becomes 9:00)
Tries ISO 8601 and Unix timestamp formats first, then falls back to the configured timeFormat
If correctFormat is enabled, auto-corrects valid but misformatted times

Create the Editor

The example reuses the built-in text editor — a text input for editing the time value:
```
1
editor: getEditor('text')
```
Complete Cell Type Definition

Put all the pieces together and register the cell type:
```
1
const cellTimeTypeDefinition = {
2
  renderer: getRenderer('text'),
3
  validator: function(value, callback) {
4
    // ... validator code from Step 3
5
  },
6
  editor: getEditor('text'),
7
};
8

9
registerCellType('moment-time', cellTimeTypeDefinition);
```
What’s happening:
- renderer: Uses the built-in text renderer to display the time value
- validator: Custom validator that validates and optionally corrects time format using Moment.js
- editor: Uses the built-in text editor for text input
- registerCellType: Registers the moment-time cell type for use in column config

Use in Handsontable

1
registerCellType('moment-time', cellTimeTypeDefinition);
2

3
const hotOptions: Handsontable.GridSettings = {
4
  data,
5
  colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Arrival Time', 'Cost'],
6
  autoRowSize: true,
7
  rowHeaders: true,
8
  height: 'auto',
9
  width: '100%',
10
  autoWrapRow: true,
11
  headerClassName: 'htLeft',
12
  columns: [
13
    { data: 'itemName', type: 'text', width: 130 },
14
    { data: 'category', type: 'text', width: 120 },
15
    { data: 'leadEngineer', type: 'text', width: 150 },
16
    {
17
      data: 'time',
18
      type: 'moment-time',
19
      width: 150,
20
      timeFormat: 'HH:mm',
21
      correctFormat: true,
22
    },
23
    {
24
      data: 'cost',
25
      type: 'numeric',
26
      width: 120,
27
      className: 'htRight',
28
      locale: 'en-US',
29
      numericFormat: {
30
        style: 'currency',
31
        currency: 'USD',
32
        minimumFractionDigits: 2,
33
      },
34
    },
35
  ],
36
  licenseKey: 'non-commercial-and-evaluation',
37
};
38

39
const hot = new Handsontable(container, hotOptions);

Key configuration:

type: 'moment-time' - uses the custom cell type on the Arrival Time column
timeFormat: 'HH:mm' - the Moment.js format string for 24-hour time
correctFormat: true - automatically reformats valid times to the expected format
headerClassName: 'htLeft' - left-aligns all column headers

How It Works - Complete Flow

Initial Render: Cell displays the time value as plain text using the text renderer
User clicks cell: The built-in text editor opens for editing
User enters time: Input like 9, 14:30, or a Unix timestamp is accepted
Validation: Moment.js checks the format and time validity; auto-corrects if correctFormat is enabled
Save: Valid values are saved to the cell; invalid values are rejected

What you learned

You created a custom Moment.js-based time cell type in Handsontable. You used Moment.js to validate and auto-correct time values, reused the built-in text renderer and editor, and registered the result with registerCellType for use across columns.

Next steps

Moment.js date - The same Moment.js pattern applied to date values, with a Pikaday calendar picker.
Numbro - A custom numeric cell type using the Numbro formatting library.
Flatpickr - A date picker using Flatpickr with dark theme support.