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
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
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();
9

10
const cellTimeTypeDefinition = {
11
  renderer: getRenderer('text'),
12
  validator(value, callback) {
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
      [
31
        'YYYY-MM-DDTHH:mm:ss.SSSZ',
32
        'X',
33
        'x',
34
      ],
35
      true
36
    ).isValid()
37
      ? moment(value)
38
      : moment(value, timeFormat);
39

40
    let isValidTime = date.isValid();
41
    let isValidFormat = moment(value, timeFormat, true).isValid() && !twoDigitValue;
42

43
    if (this.allowEmpty && value === '') {
44
      isValidTime = true;
45
      isValidFormat = true;
46
    }
47

48
    if (!isValidTime) {
49
      valid = false;
50
    }
51

52
    if (!isValidTime && isValidFormat) {
53
      valid = true;
54
    }
55

56
    if (isValidTime && !isValidFormat) {
57
      if (this.correctFormat === true) {
58
        const correctedValue = date.format(timeFormat);
59

60
        this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'timeValidator');
61
        valid = true;
62
      } else {
63
        valid = false;
64
      }
65
    }
66

67
    callback(valid);
68
  },
69
  editor: getEditor('text'),
70
};
71

72
registerCellType('moment-time', cellTimeTypeDefinition);
73

74
/* start:skip-in-preview */
75
const data = [
76
  {
77
    id: 640329,
78
    itemName: 'Lunar Core',
79
    itemNo: 'XJ-12',
80
    leadEngineer: 'Ellen Ripley',
81
    cost: 350000,
82
    inStock: true,
83
    category: 'Lander',
84
    itemQuality: 87,
85
    origin: '🇺🇸 USA',
86
    quantity: 2,
87
    valueStock: 700000,
88
    repairable: false,
89
    supplierName: 'TechNova',
90
    time: '09:30',
91
    operationalStatus: 'Awaiting Parts',
92
  },
93
  {
94
    id: 863104,
95
    itemName: 'Zero Thrusters',
96
    itemNo: 'QL-54',
97
    leadEngineer: 'Sam Bell',
98
    cost: 450000,
99
    inStock: false,
100
    category: 'Propulsion',
101
    itemQuality: 0,
102
    origin: '🇩🇪 Germany',
103
    quantity: 0,
104
    valueStock: 0,
105
    repairable: true,
106
    supplierName: 'PropelMax',
107
    time: '14:15',
108
    operationalStatus: 'In Maintenance',
109
  },
110
  {
111
    id: 395603,
112
    itemName: 'EVA Suits',
113
    itemNo: 'PM-67',
114
    leadEngineer: 'Alex Rogan',
115
    cost: 150000,
116
    inStock: true,
117
    category: 'Equipment',
118
    itemQuality: 79,
119
    origin: '🇮🇹 Italy',
120
    quantity: 50,
121
    valueStock: 7500000,
122
    repairable: true,
123
    supplierName: 'SuitCraft',
124
    time: '08:00',
125
    operationalStatus: 'Ready for Testing',
126
  },
127
  {
128
    id: 679083,
129
    itemName: 'Solar Panels',
130
    itemNo: 'BW-09',
131
    leadEngineer: 'Dave Bowman',
132
    cost: 75000,
133
    inStock: true,
134
    category: 'Energy',
135
    itemQuality: 95,
136
    origin: '🇺🇸 USA',
137
    quantity: 10,
138
    valueStock: 750000,
139
    repairable: false,
140
    supplierName: 'SolarStream',
141
    time: '16:45',
142
    operationalStatus: 'Operational',
143
  },
144
  {
145
    id: 912663,
146
    itemName: 'Comm Array',
147
    itemNo: 'ZR-56',
148
    leadEngineer: 'Louise Banks',
149
    cost: 125000,
150
    inStock: false,
151
    category: 'Communication',
152
    itemQuality: 0,
153
    origin: '🇯🇵 Japan',
154
    quantity: 0,
155
    valueStock: 0,
156
    repairable: true,
157
    supplierName: 'CommTech',
158
    time: '11:20',
159
    operationalStatus: 'Decommissioned',
160
  },
161
  {
162
    id: 315806,
163
    itemName: 'Habitat Dome',
164
    itemNo: 'UJ-23',
165
    leadEngineer: 'Dr. Ryan Stone',
166
    cost: 1000000,
167
    inStock: true,
168
    category: 'Shelter',
169
    itemQuality: 93,
170
    origin: '🇨🇦 Canada',
171
    quantity: 3,
172
    valueStock: 3000000,
173
    repairable: false,
174
    supplierName: 'DomeInnovate',
175
    time: '23:00',
176
    operationalStatus: 'Operational',
177
  },
178
];
179
/* end:skip-in-preview */
180

181
const ExampleComponent = () => {
182
  return (
183
    <HotTable
184
      data={data}
185
      colHeaders={['Item Name', 'Category', 'Lead Engineer', 'Arrival Time', 'Cost']}
186
      autoRowSize={true}
187
      rowHeaders={true}
188
      height="auto"
189
      width="100%"
190
      autoWrapRow={true}
191
      headerClassName="htLeft"
192
      licenseKey="non-commercial-and-evaluation"
193
    >
194
      <HotColumn data="itemName" type="text" width={130} />
195
      <HotColumn data="category" type="text" width={120} />
196
      <HotColumn data="leadEngineer" type="text" width={150} />
197
      <HotColumn
198
        data="time"
199
        type="moment-time"
200
        width={150}
201
        timeFormat="HH:mm"
202
        correctFormat={true}
203
      />
204
      <HotColumn
205
        data="cost"
206
        type="numeric"
207
        width={120}
208
        className="htRight"
209
        locale="en-US"
210
        numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
211
      />
212
    </HotTable>
213
  );
214
};
215

216
export default ExampleComponent;

1
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
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();
9

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

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

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

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

24
    if (twoDigitValue) {
25
      value = `${value}:00`;
26
    }
27

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

40
    let isValidTime = date.isValid();
41
    let isValidFormat = moment(value, timeFormat, true).isValid() && !twoDigitValue;
42

43
    if (this.allowEmpty && value === '') {
44
      isValidTime = true;
45
      isValidFormat = true;
46
    }
47

48
    if (!isValidTime) {
49
      valid = false;
50
    }
51

52
    if (!isValidTime && isValidFormat) {
53
      valid = true;
54
    }
55

56
    if (isValidTime && !isValidFormat) {
57
      if (this.correctFormat === true) {
58
        const correctedValue = date.format(timeFormat);
59

60
        this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'timeValidator');
61
        valid = true;
62
      } else {
63
        valid = false;
64
      }
65
    }
66

67
    callback(valid);
68
  },
69
  editor: getEditor('text'),
70
};
71

72
registerCellType('moment-time', cellTimeTypeDefinition);
73

74
/* start:skip-in-preview */
75
interface InventoryItem {
76
  id: number;
77
  itemName: string;
78
  itemNo: string;
79
  leadEngineer: string;
80
  cost: number;
81
  inStock: boolean;
82
  category: string;
83
  itemQuality: number;
84
  origin: string;
85
  quantity: number;
86
  valueStock: number;
87
  repairable: boolean;
88
  supplierName: string;
89
  time: string;
90
  operationalStatus: string;
91
}
92

93
const data: InventoryItem[] = [
94
  {
95
    id: 640329,
96
    itemName: 'Lunar Core',
97
    itemNo: 'XJ-12',
98
    leadEngineer: 'Ellen Ripley',
99
    cost: 350000,
100
    inStock: true,
101
    category: 'Lander',
102
    itemQuality: 87,
103
    origin: '🇺🇸 USA',
104
    quantity: 2,
105
    valueStock: 700000,
106
    repairable: false,
107
    supplierName: 'TechNova',
108
    time: '09:30',
109
    operationalStatus: 'Awaiting Parts',
110
  },
111
  {
112
    id: 863104,
113
    itemName: 'Zero Thrusters',
114
    itemNo: 'QL-54',
115
    leadEngineer: 'Sam Bell',
116
    cost: 450000,
117
    inStock: false,
118
    category: 'Propulsion',
119
    itemQuality: 0,
120
    origin: '🇩🇪 Germany',
121
    quantity: 0,
122
    valueStock: 0,
123
    repairable: true,
124
    supplierName: 'PropelMax',
125
    time: '14:15',
126
    operationalStatus: 'In Maintenance',
127
  },
128
  {
129
    id: 395603,
130
    itemName: 'EVA Suits',
131
    itemNo: 'PM-67',
132
    leadEngineer: 'Alex Rogan',
133
    cost: 150000,
134
    inStock: true,
135
    category: 'Equipment',
136
    itemQuality: 79,
137
    origin: '🇮🇹 Italy',
138
    quantity: 50,
139
    valueStock: 7500000,
140
    repairable: true,
141
    supplierName: 'SuitCraft',
142
    time: '08:00',
143
    operationalStatus: 'Ready for Testing',
144
  },
145
  {
146
    id: 679083,
147
    itemName: 'Solar Panels',
148
    itemNo: 'BW-09',
149
    leadEngineer: 'Dave Bowman',
150
    cost: 75000,
151
    inStock: true,
152
    category: 'Energy',
153
    itemQuality: 95,
154
    origin: '🇺🇸 USA',
155
    quantity: 10,
156
    valueStock: 750000,
157
    repairable: false,
158
    supplierName: 'SolarStream',
159
    time: '16:45',
160
    operationalStatus: 'Operational',
161
  },
162
  {
163
    id: 912663,
164
    itemName: 'Comm Array',
165
    itemNo: 'ZR-56',
166
    leadEngineer: 'Louise Banks',
167
    cost: 125000,
168
    inStock: false,
169
    category: 'Communication',
170
    itemQuality: 0,
171
    origin: '🇯🇵 Japan',
172
    quantity: 0,
173
    valueStock: 0,
174
    repairable: true,
175
    supplierName: 'CommTech',
176
    time: '11:20',
177
    operationalStatus: 'Decommissioned',
178
  },
179
  {
180
    id: 315806,
181
    itemName: 'Habitat Dome',
182
    itemNo: 'UJ-23',
183
    leadEngineer: 'Dr. Ryan Stone',
184
    cost: 1000000,
185
    inStock: true,
186
    category: 'Shelter',
187
    itemQuality: 93,
188
    origin: '🇨🇦 Canada',
189
    quantity: 3,
190
    valueStock: 3000000,
191
    repairable: false,
192
    supplierName: 'DomeInnovate',
193
    time: '23:00',
194
    operationalStatus: 'Operational',
195
  },
196
];
197
/* end:skip-in-preview */
198

199
const ExampleComponent = () => {
200
  return (
201
    <HotTable
202
      data={data}
203
      colHeaders={['Item Name', 'Category', 'Lead Engineer', 'Arrival Time', 'Cost']}
204
      autoRowSize={true}
205
      rowHeaders={true}
206
      height="auto"
207
      width="100%"
208
      autoWrapRow={true}
209
      headerClassName="htLeft"
210
      licenseKey="non-commercial-and-evaluation"
211
    >
212
      <HotColumn data="itemName" type="text" width={130} />
213
      <HotColumn data="category" type="text" width={120} />
214
      <HotColumn data="leadEngineer" type="text" width={150} />
215
      <HotColumn
216
        data="time"
217
        type="moment-time"
218
        width={150}
219
        timeFormat="HH:mm"
220
        correctFormat={true}
221
      />
222
      <HotColumn
223
        data="cost"
224
        type="numeric"
225
        width={120}
226
        className="htRight"
227
        locale="en-US"
228
        numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
229
      />
230
    </HotTable>
231
  );
232
};
233

234
export default ExampleComponent;

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.