Moment.js-based time

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
// Register all Handsontable's modules.
9
registerAllModules();
10

11
/* start:skip-in-preview */
12
const data = [
13
  {
14
    id: 640329,
15
    itemName: 'Lunar Core',
16
    itemNo: 'XJ-12',
17
    leadEngineer: 'Ellen Ripley',
18
    cost: 350000,
19
    inStock: true,
20
    category: 'Lander',
21
    itemQuality: 87,
22
    origin: '🇺🇸 USA',
23
    quantity: 2,
24
    valueStock: 700000,
25
    repairable: false,
26
    supplierName: 'TechNova',
27
    time: '09:30',
28
    operationalStatus: 'Awaiting Parts',
29
  },
30
  {
31
    id: 863104,
32
    itemName: 'Zero Thrusters',
33
    itemNo: 'QL-54',
34
    leadEngineer: 'Sam Bell',
35
    cost: 450000,
36
    inStock: false,
37
    category: 'Propulsion',
38
    itemQuality: 0,
39
    origin: '🇩🇪 Germany',
40
    quantity: 0,
41
    valueStock: 0,
42
    repairable: true,
43
    supplierName: 'PropelMax',
44
    time: '14:15',
45
    operationalStatus: 'In Maintenance',
46
  },
47
  {
48
    id: 395603,
49
    itemName: 'EVA Suits',
50
    itemNo: 'PM-67',
51
    leadEngineer: 'Alex Rogan',
52
    cost: 150000,
53
    inStock: true,
54
    category: 'Equipment',
55
    itemQuality: 79,
56
    origin: '🇮🇹 Italy',
57
    quantity: 50,
58
    valueStock: 7500000,
59
    repairable: true,
60
    supplierName: 'SuitCraft',
61
    time: '08:00',
62
    operationalStatus: 'Ready for Testing',
63
  },
64
  {
65
    id: 679083,
66
    itemName: 'Solar Panels',
67
    itemNo: 'BW-09',
68
    leadEngineer: 'Dave Bowman',
69
    cost: 75000,
70
    inStock: true,
71
    category: 'Energy',
72
    itemQuality: 95,
73
    origin: '🇺🇸 USA',
74
    quantity: 10,
75
    valueStock: 750000,
76
    repairable: false,
77
    supplierName: 'SolarStream',
78
    time: '16:45',
79
    operationalStatus: 'Operational',
80
  },
81
  {
82
    id: 912663,
83
    itemName: 'Comm Array',
84
    itemNo: 'ZR-56',
85
    leadEngineer: 'Louise Banks',
86
    cost: 125000,
87
    inStock: false,
88
    category: 'Communication',
89
    itemQuality: 0,
90
    origin: '🇯🇵 Japan',
91
    quantity: 0,
92
    valueStock: 0,
93
    repairable: true,
94
    supplierName: 'CommTech',
95
    time: '11:20',
96
    operationalStatus: 'Decommissioned',
97
  },
98
  {
99
    id: 315806,
100
    itemName: 'Habitat Dome',
101
    itemNo: 'UJ-23',
102
    leadEngineer: 'Dr. Ryan Stone',
103
    cost: 1000000,
104
    inStock: true,
105
    category: 'Shelter',
106
    itemQuality: 93,
107
    origin: '🇨🇦 Canada',
108
    quantity: 3,
109
    valueStock: 3000000,
110
    repairable: false,
111
    supplierName: 'DomeInnovate',
112
    time: '23:00',
113
    operationalStatus: 'Operational',
114
  },
115
];
116

117
/* end:skip-in-preview */
118
// Get the DOM element with the ID 'example1' where the Handsontable will be rendered
119
const container = document.querySelector('#example1');
120
const cellTimeTypeDefinition = {
121
  renderer: getRenderer('text'),
122
  validator(value, callback) {
123
    const timeFormat = this.timeFormat ?? 'h:mm:ss a';
124
    let valid = true;
125

126
    if (value === null) {
127
      value = '';
128
    }
129

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

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

134
    if (twoDigitValue) {
135
      value += ':00';
136
    }
137

138
    const date = moment(
139
      value,
140
      [
141
        'YYYY-MM-DDTHH:mm:ss.SSSZ',
142
        'X',
143
        'x', // Unix ms timestamp
144
      ],
145
      true
146
    ).isValid()
147
      ? moment(value)
148
      : moment(value, timeFormat);
149

150
    let isValidTime = date.isValid();
151
    // is it in the specified format
152
    let isValidFormat = moment(value, timeFormat, true).isValid() && !twoDigitValue;
153

154
    if (this.allowEmpty && value === '') {
155
      isValidTime = true;
156
      isValidFormat = true;
157
    }
158

159
    if (!isValidTime) {
160
      valid = false;
161
    }
162

163
    if (!isValidTime && isValidFormat) {
164
      valid = true;
165
    }
166

167
    if (isValidTime && !isValidFormat) {
168
      if (this.correctFormat === true) {
169
        const correctedValue = date.format(timeFormat);
170

171
        this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'timeValidator');
172
        valid = true;
173
      } else {
174
        valid = false;
175
      }
176
    }
177

178
    callback(valid);
179
  },
180
  editor: getEditor('text'),
181
};
182

183
registerCellType('moment-time', cellTimeTypeDefinition);
184

185
// Define configuration options for the Handsontable
186
const hotOptions = {
187
  data,
188
  colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Arrival Time', 'Cost'],
189
  autoRowSize: true,
190
  rowHeaders: true,
191
  height: 'auto',
192
  width: '100%',
193
  autoWrapRow: true,
194
  headerClassName: 'htLeft',
195
  columns: [
196
    { data: 'itemName', type: 'text', width: 130 },
197
    { data: 'category', type: 'text', width: 120 },
198
    { data: 'leadEngineer', type: 'text', width: 150 },
199
    {
200
      data: 'time',
201
      type: 'moment-time',
202
      width: 150,
203
      timeFormat: 'HH:mm',
204
      correctFormat: true,
205
    },
206
    {
207
      data: 'cost',
208
      type: 'numeric',
209
      width: 120,
210
      className: 'htRight',
211
      numericFormat: {
212
        pattern: '$0,0.00',
213
        culture: 'en-US',
214
      },
215
    },
216
  ],
217
  licenseKey: 'non-commercial-and-evaluation',
218
};
219

220
// Initialize the Handsontable instance with the specified configuration options
221
// eslint-disable-next-line no-unused-vars
222
const hot = new Handsontable(container, hotOptions);

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
// Register all Handsontable's modules.
9
registerAllModules();
10

11
/* start:skip-in-preview */
12
const data = [
13
  {
14
    id: 640329,
15
    itemName: 'Lunar Core',
16
    itemNo: 'XJ-12',
17
    leadEngineer: 'Ellen Ripley',
18
    cost: 350000,
19
    inStock: true,
20
    category: 'Lander',
21
    itemQuality: 87,
22
    origin: '🇺🇸 USA',
23
    quantity: 2,
24
    valueStock: 700000,
25
    repairable: false,
26
    supplierName: 'TechNova',
27
    time: '09:30',
28
    operationalStatus: 'Awaiting Parts',
29
  },
30
  {
31
    id: 863104,
32
    itemName: 'Zero Thrusters',
33
    itemNo: 'QL-54',
34
    leadEngineer: 'Sam Bell',
35
    cost: 450000,
36
    inStock: false,
37
    category: 'Propulsion',
38
    itemQuality: 0,
39
    origin: '🇩🇪 Germany',
40
    quantity: 0,
41
    valueStock: 0,
42
    repairable: true,
43
    supplierName: 'PropelMax',
44
    time: '14:15',
45
    operationalStatus: 'In Maintenance',
46
  },
47
  {
48
    id: 395603,
49
    itemName: 'EVA Suits',
50
    itemNo: 'PM-67',
51
    leadEngineer: 'Alex Rogan',
52
    cost: 150000,
53
    inStock: true,
54
    category: 'Equipment',
55
    itemQuality: 79,
56
    origin: '🇮🇹 Italy',
57
    quantity: 50,
58
    valueStock: 7500000,
59
    repairable: true,
60
    supplierName: 'SuitCraft',
61
    time: '08:00',
62
    operationalStatus: 'Ready for Testing',
63
  },
64
  {
65
    id: 679083,
66
    itemName: 'Solar Panels',
67
    itemNo: 'BW-09',
68
    leadEngineer: 'Dave Bowman',
69
    cost: 75000,
70
    inStock: true,
71
    category: 'Energy',
72
    itemQuality: 95,
73
    origin: '🇺🇸 USA',
74
    quantity: 10,
75
    valueStock: 750000,
76
    repairable: false,
77
    supplierName: 'SolarStream',
78
    time: '16:45',
79
    operationalStatus: 'Operational',
80
  },
81
  {
82
    id: 912663,
83
    itemName: 'Comm Array',
84
    itemNo: 'ZR-56',
85
    leadEngineer: 'Louise Banks',
86
    cost: 125000,
87
    inStock: false,
88
    category: 'Communication',
89
    itemQuality: 0,
90
    origin: '🇯🇵 Japan',
91
    quantity: 0,
92
    valueStock: 0,
93
    repairable: true,
94
    supplierName: 'CommTech',
95
    time: '11:20',
96
    operationalStatus: 'Decommissioned',
97
  },
98
  {
99
    id: 315806,
100
    itemName: 'Habitat Dome',
101
    itemNo: 'UJ-23',
102
    leadEngineer: 'Dr. Ryan Stone',
103
    cost: 1000000,
104
    inStock: true,
105
    category: 'Shelter',
106
    itemQuality: 93,
107
    origin: '🇨🇦 Canada',
108
    quantity: 3,
109
    valueStock: 3000000,
110
    repairable: false,
111
    supplierName: 'DomeInnovate',
112
    time: '23:00',
113
    operationalStatus: 'Operational',
114
  },
115
];
116
/* end:skip-in-preview */
117
// Get the DOM element with the ID 'example1' where the Handsontable will be rendered
118
const container = document.querySelector('#example1')!;
119
const cellTimeTypeDefinition = {
120
  renderer: getRenderer('text'),
121
  validator: function(value, callback) {
122
    const timeFormat = this.timeFormat ?? 'h:mm:ss a';
123
    let valid = true;
124

125
    if (value === null) {
126
      value = '';
127
    }
128

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

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

133
    if (twoDigitValue) {
134
      value += ':00';
135
    }
136

137
    const date = moment(value, [
138
      'YYYY-MM-DDTHH:mm:ss.SSSZ',
139
      'X', // Unix timestamp
140
      'x' // Unix ms timestamp
141
    ], true).isValid() ?
142
      moment(value) : moment(value, timeFormat);
143
    let isValidTime = date.isValid();
144

145
    // is it in the specified format
146
    let isValidFormat = moment(value, timeFormat, true).isValid() && !twoDigitValue;
147

148
    if (this.allowEmpty && value === '') {
149
      isValidTime = true;
150
      isValidFormat = true;
151
    }
152
    if (!isValidTime) {
153
      valid = false;
154
    }
155
    if (!isValidTime && isValidFormat) {
156
      valid = true;
157
    }
158
    if (isValidTime && !isValidFormat) {
159
      if (this.correctFormat === true) {
160
        const correctedValue = date.format(timeFormat);
161

162
        this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'timeValidator');
163
        valid = true;
164
      } else {
165
        valid = false;
166
      }
167
    }
168

169
    callback(valid);
170
  },
171
  editor: getEditor('text'),
172
};
173

174
registerCellType('moment-time', cellTimeTypeDefinition);
175

176
// Define configuration options for the Handsontable
177
const hotOptions: Handsontable.GridSettings = {
178
  data,
179
  colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Arrival Time', 'Cost'],
180
  autoRowSize: true,
181
  rowHeaders: true,
182
  height: 'auto',
183
  width: '100%',
184
  autoWrapRow: true,
185
  headerClassName: 'htLeft',
186
  columns: [
187
    { data: 'itemName', type: 'text', width: 130 },
188
    { data: 'category', type: 'text', width: 120 },
189
    { data: 'leadEngineer', type: 'text', width: 150 },
190
    {
191
      data: 'time',
192
      type: 'moment-time',
193
      width: 150,
194
      timeFormat: 'HH:mm',
195
      correctFormat: true,
196
    },
197
    {
198
      data: 'cost',
199
      type: 'numeric',
200
      width: 120,
201
      className: 'htRight',
202
      numericFormat: {
203
        pattern: '$0,0.00',
204
        culture: 'en-US',
205
      },
206
    },
207
  ],
208
  licenseKey: 'non-commercial-and-evaluation',
209
};
210

211
// Initialize the Handsontable instance with the specified configuration options
212
// eslint-disable-next-line no-unused-vars
213
const hot = new Handsontable(container, hotOptions);

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

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

We reuse the built-in text editor — a simple 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 simple 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
      numericFormat: {
29
        pattern: '$0,0.00',
30
        culture: 'en-US',
31
      },
32
    },
33
  ],
34
  licenseKey: 'non-commercial-and-evaluation',
35
};
36

37
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