Pikaday

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import moment from 'moment';
4
import Pikaday from '@handsontable/pikaday';
5
import { editorFactory } from 'handsontable/editors';
6
import { rendererFactory } from 'handsontable/renderers';
7

8
// Register all Handsontable's modules.
9
registerAllModules();
10

11
const DATE_FORMAT_US = 'MM/DD/YYYY';
12
const DEFAULT_DATE_FORMAT = DATE_FORMAT_US;
13
/* start:skip-in-preview */
14
const inputData = [
15
  {
16
    id: 640329,
17
    itemName: 'Lunar Core',
18
    itemNo: 'XJ-12',
19
    leadEngineer: 'Ellen Ripley',
20
    cost: 350000,
21
    inStock: true,
22
    category: 'Lander',
23
    itemQuality: 87,
24
    origin: '🇺🇸 USA',
25
    quantity: 2,
26
    valueStock: 700000,
27
    repairable: false,
28
    supplierName: 'TechNova',
29
    restockDate: '2025-08-01',
30
    operationalStatus: 'Awaiting Parts',
31
  },
32
  {
33
    id: 863104,
34
    itemName: 'Zero Thrusters',
35
    itemNo: 'QL-54',
36
    leadEngineer: 'Sam Bell',
37
    cost: 450000,
38
    inStock: false,
39
    category: 'Propulsion',
40
    itemQuality: 0,
41
    origin: '🇩🇪 Germany',
42
    quantity: 0,
43
    valueStock: 0,
44
    repairable: true,
45
    supplierName: 'PropelMax',
46
    restockDate: '2025-09-15',
47
    operationalStatus: 'In Maintenance',
48
  },
49
  {
50
    id: 395603,
51
    itemName: 'EVA Suits',
52
    itemNo: 'PM-67',
53
    leadEngineer: 'Alex Rogan',
54
    cost: 150000,
55
    inStock: true,
56
    category: 'Equipment',
57
    itemQuality: 79,
58
    origin: '🇮🇹 Italy',
59
    quantity: 50,
60
    valueStock: 7500000,
61
    repairable: true,
62
    supplierName: 'SuitCraft',
63
    restockDate: '2025-10-05',
64
    operationalStatus: 'Ready for Testing',
65
  },
66
  {
67
    id: 679083,
68
    itemName: 'Solar Panels',
69
    itemNo: 'BW-09',
70
    leadEngineer: 'Dave Bowman',
71
    cost: 75000,
72
    inStock: true,
73
    category: 'Energy',
74
    itemQuality: 95,
75
    origin: '🇺🇸 USA',
76
    quantity: 10,
77
    valueStock: 750000,
78
    repairable: false,
79
    supplierName: 'SolarStream',
80
    restockDate: '2025-11-10',
81
    operationalStatus: 'Operational',
82
  },
83
  {
84
    id: 912663,
85
    itemName: 'Comm Array',
86
    itemNo: 'ZR-56',
87
    leadEngineer: 'Louise Banks',
88
    cost: 125000,
89
    inStock: false,
90
    category: 'Communication',
91
    itemQuality: 0,
92
    origin: '🇯🇵 Japan',
93
    quantity: 0,
94
    valueStock: 0,
95
    repairable: true,
96
    supplierName: 'CommTech',
97
    restockDate: '2025-12-20',
98
    operationalStatus: 'Decommissioned',
99
  },
100
  {
101
    id: 315806,
102
    itemName: 'Habitat Dome',
103
    itemNo: 'UJ-23',
104
    leadEngineer: 'Dr. Ryan Stone',
105
    cost: 1000000,
106
    inStock: true,
107
    category: 'Shelter',
108
    itemQuality: 93,
109
    origin: '🇨🇦 Canada',
110
    quantity: 3,
111
    valueStock: 3000000,
112
    repairable: false,
113
    supplierName: 'DomeInnovate',
114
    restockDate: '2026-01-25',
115
    operationalStatus: 'Operational',
116
  },
117
  {
118
    id: 954632,
119
    itemName: 'Oxygen Unit',
120
    itemNo: 'FK-87',
121
    leadEngineer: 'Dr. Grace Augustine',
122
    cost: 600000,
123
    inStock: true,
124
    category: 'Life Support',
125
    itemQuality: 85,
126
    origin: '🇺🇸 USA',
127
    quantity: 15,
128
    valueStock: 9000000,
129
    repairable: true,
130
    supplierName: 'OxyGenius',
131
    restockDate: '2026-03-02',
132
    operationalStatus: 'Awaiting Parts',
133
  },
134
  {
135
    id: 734944,
136
    itemName: 'Processing Rig',
137
    itemNo: 'LK-13',
138
    leadEngineer: 'Jake Sully',
139
    cost: 350000,
140
    inStock: true,
141
    category: 'Mining',
142
    itemQuality: 81,
143
    origin: '🇦🇺 Australia',
144
    quantity: 25,
145
    valueStock: 8750000,
146
    repairable: true,
147
    supplierName: 'RigTech',
148
    restockDate: '2026-04-15',
149
    operationalStatus: 'Ready for Testing',
150
  },
151
  {
152
    id: 834662,
153
    itemName: 'Navigation',
154
    itemNo: 'XP-24',
155
    leadEngineer: 'Dr. Ellie Arroway',
156
    cost: 450000,
157
    inStock: true,
158
    category: 'Navigation',
159
    itemQuality: 89,
160
    origin: '🇫🇷 France',
161
    quantity: 8,
162
    valueStock: 3600000,
163
    repairable: false,
164
    supplierName: 'NavSolutions',
165
    restockDate: '2026-05-30',
166
    operationalStatus: 'In Maintenance',
167
  },
168
  {
169
    id: 714329,
170
    itemName: 'Surveyor Arm',
171
    itemNo: 'QA-86',
172
    leadEngineer: 'Mark Watney',
173
    cost: 100000,
174
    inStock: true,
175
    category: 'Exploration',
176
    itemQuality: 78,
177
    origin: '🇺🇸 USA',
178
    quantity: 40,
179
    valueStock: 4000000,
180
    repairable: true,
181
    supplierName: 'ExploreTech',
182
    restockDate: '2026-07-12',
183
    operationalStatus: 'Decommissioned',
184
  },
185
];
186

187
const data = inputData.map((item) => ({
188
  ...item,
189
  restockDate: moment(new Date(item.restockDate)).format(DATE_FORMAT_US),
190
}));
191

192
/* end:skip-in-preview */
193
// Get the DOM element with the ID 'example1' where the Handsontable will be rendered
194
const container = document.querySelector('#example1');
195
const cellDefinition = {
196
  renderer: rendererFactory(({ td, value, cellProperties }) => {
197
    td.innerText = moment(new Date(value), cellProperties.renderFormat).format(cellProperties.renderFormat);
198
  }),
199
  editor: editorFactory({
200
    position: 'portal',
201
    shortcuts: [
202
      {
203
        keys: [['ArrowLeft']],
204
        callback: (editor, _event) => {
205
          // @ts-ignore
206
          editor.pickaday.adjustDate('subtract', 1);
207
          _event.preventDefault();
208
        },
209
      },
210
      {
211
        keys: [['ArrowRight']],
212
        callback: (editor, _event) => {
213
          // @ts-ignore
214
          editor.pickaday.adjustDate('add', 1);
215
          _event.preventDefault();
216
        },
217
      },
218
      {
219
        keys: [['ArrowUp']],
220
        callback: (editor, _event) => {
221
          // @ts-ignore
222
          editor.pickaday.adjustDate('subtract', 7);
223
          _event.preventDefault();
224
        },
225
      },
226
      {
227
        keys: [['ArrowDown']],
228
        callback: (editor, _event) => {
229
          // @ts-ignore
230
          editor.pickaday.adjustDate('add', 7);
231
          _event.preventDefault();
232
        },
233
      },
234
    ],
235
    init(editor) {
236
      editor.parentDestroyed = false;
237
      // create the input element on init. This is a text input that color picker will be attached to.
238
      editor.input = editor.hot.rootDocument.createElement('INPUT');
239
      // editor.showDatepicker = (editor, event) => {
240
      editor.datePicker = editor.container;
241
      /**
242
       * Prevent recognizing clicking on datepicker as clicking outside of table.
243
       */
244
      editor.hot.rootDocument.addEventListener('mousedown', (event) => {
245
        if (event.target && event.target.classList.contains('pika-day')) {
246
          editor.hideDatepicker(editor);
247
        }
248
      });
249
      // TODO: fix this https://github.com/handsontable/dev-handsontable/issues/3004
250
      // @ts-ignore
251
      // editor.hot.rootPortalElement.appendChild(editor.datePicker);
252
    },
253
    // afterInit(editor) {
254
    //   editor.pickaday = new Pikaday(editor.getDatePickerConfig(editor));
255
    // },
256
    getDatePickerConfig(editor) {
257
      const htInput = editor.input;
258
      const options = {};
259

260
      if (editor.cellProperties && editor.cellProperties.datePickerConfig) {
261
        Object.assign(options, editor.cellProperties.datePickerConfig);
262
      }
263

264
      const origOnSelect = options.onSelect;
265
      const origOnClose = options.onClose;
266

267
      options.field = htInput;
268
      options.trigger = htInput;
269
      options.container = editor.datePicker;
270
      options.bound = false;
271
      options.keyboardInput = false;
272
      options.format = options.format ?? editor.getDateFormat(editor);
273
      options.reposition = options.reposition || false;
274
      // Set the RTL to `false`. Due to the https://github.com/Pikaday/Pikaday/issues/647 bug, the layout direction
275
      // of the date picker is controlled by juggling the "dir" attribute of the root date picker element.
276
      options.isRTL = false;
277
      options.onSelect = function (date) {
278
        let dateStr;
279

280
        if (!isNaN(date.getTime())) {
281
          dateStr = moment(date).format(editor.getDateFormat(editor));
282
        }
283

284
        editor.setValue(dateStr);
285

286
        if (origOnSelect) {
287
          origOnSelect.call(editor.pickaday, date);
288
        }
289

290
        if (Handsontable.helper.isMobileBrowser()) {
291
          editor.hideDatepicker(editor);
292
        }
293
      };
294
      options.onClose = () => {
295
        if (!editor.parentDestroyed) {
296
          editor.finishEditing(false);
297
        }
298

299
        if (origOnClose) {
300
          origOnClose();
301
        }
302
      };
303

304
      return options;
305
    },
306
    hideDatepicker(editor) {
307
      editor.pickaday.hide();
308
    },
309
    showDatepicker(editor, event) {
310
      const dateFormat = editor.getDateFormat(editor);
311
      // TODO: view is not exported in the handsontable library d.ts, so we need to use @ts-ignore
312
      // @ts-ignore
313
      const isMouseDown = editor.hot.view.isMouseDown();
314
      const isMeta = event && 'keyCode' in event ? Handsontable.helper.isFunctionKey(event.keyCode) : false;
315

316
      let dateStr;
317

318
      editor.datePicker.style.display = 'block';
319
      editor.pickaday = new Pikaday(editor.getDatePickerConfig(editor));
320

321
      // TODO: useMoment is not exported in the pikaday library d.ts, so we need to use @ts-ignore
322
      // @ts-ignore
323
      if (typeof editor.pickaday.useMoment === 'function') {
324
        // @ts-ignore
325
        editor.pickaday.useMoment(moment);
326
      }
327

328
      // TODO: _onInputFocus is not exported in the pikaday library d.ts, so we need to use @ts-ignore
329
      // @ts-ignore
330
      editor.pickaday._onInputFocus = function () {};
331

332
      if (editor.originalValue) {
333
        dateStr = editor.originalValue;
334

335
        if (moment(dateStr, dateFormat, true).isValid()) {
336
          editor.pickaday.setMoment(moment(dateStr, dateFormat), true);
337
        }
338

339
        // workaround for date/time cells - pikaday resets the cell value to 12:00 AM by default, this will overwrite the value.
340
        if (editor.getValue() !== editor.originalValue) {
341
          editor.setValue(editor.originalValue);
342
        }
343

344
        if (!isMeta && !isMouseDown) {
345
          editor.setValue('');
346
        }
347
      } else if (editor.cellProperties.defaultDate) {
348
        dateStr = editor.cellProperties.defaultDate;
349

350
        if (moment(dateStr, dateFormat, true).isValid()) {
351
          editor.pickaday.setMoment(moment(dateStr, dateFormat), true);
352
        }
353

354
        if (!isMeta && !isMouseDown) {
355
          editor.setValue('');
356
        }
357
      } else {
358
        // if a default date is not defined, set a soft-default-date: display the current day and month in the
359
        // datepicker, but don't fill the editor input
360
        editor.pickaday.gotoToday();
361
      }
362
    },
363
    afterClose(editor) {
364
      if (editor.pickaday.destroy) {
365
        editor.pickaday.destroy();
366
      }
367
    },
368
    afterOpen(editor, event) {
369
      const cellRect = editor.TD.getBoundingClientRect();
370

371
      editor.input.style.width = `${cellRect.width}px`;
372
      editor.input.style.height = `${cellRect.height}px`;
373
      editor.showDatepicker(editor, event);
374
    },
375
    getValue(editor) {
376
      return editor.input.value;
377
    },
378
    setValue(editor, value) {
379
      editor.input.value = value;
380
    },
381
    getDateFormat(editor) {
382
      return editor.cellProperties.dateFormat ?? DEFAULT_DATE_FORMAT;
383
    },
384
  }),
385
};
386

387
// Define configuration options for the Handsontable
388
const hotOptions = {
389
  data,
390
  height: 'auto',
391
  colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost'],
392
  autoRowSize: true,
393
  rowHeaders: true,
394
  width: '100%',
395
  autoWrapRow: true,
396
  headerClassName: 'htLeft',
397
  columns: [
398
    { data: 'itemName', type: 'text', width: 130 },
399
    { data: 'category', type: 'text', width: 120 },
400
    { data: 'leadEngineer', type: 'text', width: 150 },
401
    {
402
      data: 'restockDate',
403
      width: 150,
404
      allowInvalid: false,
405
      ...cellDefinition,
406
      renderFormat: DATE_FORMAT_US,
407
      dateFormat: DATE_FORMAT_US,
408
      correctFormat: true,
409
      defaultDate: '01/01/2020',
410
      datePickerConfig: {
411
        firstDay: 0,
412
        showWeekNumber: true,
413
        disableDayFn(date) {
414
          return date.getDay() === 0 || date.getDay() === 6;
415
        },
416
      },
417
    },
418
    {
419
      data: 'cost',
420
      type: 'numeric',
421
      width: 120,
422
      className: 'htRight',
423
      numericFormat: {
424
        pattern: '$0,0.00',
425
        culture: 'en-US',
426
      },
427
    },
428
  ],
429
  licenseKey: 'non-commercial-and-evaluation',
430
};
431

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

1
import Handsontable from "handsontable/base";
2
import { registerAllModules } from "handsontable/registry";
3
import moment from "moment";
4
import Pikaday from "@handsontable/pikaday";
5
import { CellProperties } from "handsontable/settings";
6
import { editorFactory } from "handsontable/editors";
7
import { rendererFactory } from "handsontable/renderers";
8
// Register all Handsontable's modules.
9
registerAllModules();
10

11
const DATE_FORMAT_US = "MM/DD/YYYY";
12
const DEFAULT_DATE_FORMAT = DATE_FORMAT_US;
13

14
/* start:skip-in-preview */
15

16
const inputData = [
17
  {
18
    id: 640329,
19
    itemName: "Lunar Core",
20
    itemNo: "XJ-12",
21
    leadEngineer: "Ellen Ripley",
22
    cost: 350000,
23
    inStock: true,
24
    category: "Lander",
25
    itemQuality: 87,
26
    origin: "🇺🇸 USA",
27
    quantity: 2,
28
    valueStock: 700000,
29
    repairable: false,
30
    supplierName: "TechNova",
31
    restockDate: "2025-08-01",
32
    operationalStatus: "Awaiting Parts",
33
  },
34
  {
35
    id: 863104,
36
    itemName: "Zero Thrusters",
37
    itemNo: "QL-54",
38
    leadEngineer: "Sam Bell",
39
    cost: 450000,
40
    inStock: false,
41
    category: "Propulsion",
42
    itemQuality: 0,
43
    origin: "🇩🇪 Germany",
44
    quantity: 0,
45
    valueStock: 0,
46
    repairable: true,
47
    supplierName: "PropelMax",
48
    restockDate: "2025-09-15",
49
    operationalStatus: "In Maintenance",
50
  },
51
  {
52
    id: 395603,
53
    itemName: "EVA Suits",
54
    itemNo: "PM-67",
55
    leadEngineer: "Alex Rogan",
56
    cost: 150000,
57
    inStock: true,
58
    category: "Equipment",
59
    itemQuality: 79,
60
    origin: "🇮🇹 Italy",
61
    quantity: 50,
62
    valueStock: 7500000,
63
    repairable: true,
64
    supplierName: "SuitCraft",
65
    restockDate: "2025-10-05",
66
    operationalStatus: "Ready for Testing",
67
  },
68
  {
69
    id: 679083,
70
    itemName: "Solar Panels",
71
    itemNo: "BW-09",
72
    leadEngineer: "Dave Bowman",
73
    cost: 75000,
74
    inStock: true,
75
    category: "Energy",
76
    itemQuality: 95,
77
    origin: "🇺🇸 USA",
78
    quantity: 10,
79
    valueStock: 750000,
80
    repairable: false,
81
    supplierName: "SolarStream",
82
    restockDate: "2025-11-10",
83
    operationalStatus: "Operational",
84
  },
85
  {
86
    id: 912663,
87
    itemName: "Comm Array",
88
    itemNo: "ZR-56",
89
    leadEngineer: "Louise Banks",
90
    cost: 125000,
91
    inStock: false,
92
    category: "Communication",
93
    itemQuality: 0,
94
    origin: "🇯🇵 Japan",
95
    quantity: 0,
96
    valueStock: 0,
97
    repairable: true,
98
    supplierName: "CommTech",
99
    restockDate: "2025-12-20",
100
    operationalStatus: "Decommissioned",
101
  },
102
  {
103
    id: 315806,
104
    itemName: "Habitat Dome",
105
    itemNo: "UJ-23",
106
    leadEngineer: "Dr. Ryan Stone",
107
    cost: 1000000,
108
    inStock: true,
109
    category: "Shelter",
110
    itemQuality: 93,
111
    origin: "🇨🇦 Canada",
112
    quantity: 3,
113
    valueStock: 3000000,
114
    repairable: false,
115
    supplierName: "DomeInnovate",
116
    restockDate: "2026-01-25",
117
    operationalStatus: "Operational",
118
  },
119
  {
120
    id: 954632,
121
    itemName: "Oxygen Unit",
122
    itemNo: "FK-87",
123
    leadEngineer: "Dr. Grace Augustine",
124
    cost: 600000,
125
    inStock: true,
126
    category: "Life Support",
127
    itemQuality: 85,
128
    origin: "🇺🇸 USA",
129
    quantity: 15,
130
    valueStock: 9000000,
131
    repairable: true,
132
    supplierName: "OxyGenius",
133
    restockDate: "2026-03-02",
134
    operationalStatus: "Awaiting Parts",
135
  },
136
  {
137
    id: 734944,
138
    itemName: "Processing Rig",
139
    itemNo: "LK-13",
140
    leadEngineer: "Jake Sully",
141
    cost: 350000,
142
    inStock: true,
143
    category: "Mining",
144
    itemQuality: 81,
145
    origin: "🇦🇺 Australia",
146
    quantity: 25,
147
    valueStock: 8750000,
148
    repairable: true,
149
    supplierName: "RigTech",
150
    restockDate: "2026-04-15",
151
    operationalStatus: "Ready for Testing",
152
  },
153
  {
154
    id: 834662,
155
    itemName: "Navigation",
156
    itemNo: "XP-24",
157
    leadEngineer: "Dr. Ellie Arroway",
158
    cost: 450000,
159
    inStock: true,
160
    category: "Navigation",
161
    itemQuality: 89,
162
    origin: "🇫🇷 France",
163
    quantity: 8,
164
    valueStock: 3600000,
165
    repairable: false,
166
    supplierName: "NavSolutions",
167
    restockDate: "2026-05-30",
168
    operationalStatus: "In Maintenance",
169
  },
170
  {
171
    id: 714329,
172
    itemName: "Surveyor Arm",
173
    itemNo: "QA-86",
174
    leadEngineer: "Mark Watney",
175
    cost: 100000,
176
    inStock: true,
177
    category: "Exploration",
178
    itemQuality: 78,
179
    origin: "🇺🇸 USA",
180
    quantity: 40,
181
    valueStock: 4000000,
182
    repairable: true,
183
    supplierName: "ExploreTech",
184
    restockDate: "2026-07-12",
185
    operationalStatus: "Decommissioned",
186
  },
187
];
188

189
const data = inputData.map((item) => ({
190
  ...item,
191
  restockDate: moment(new Date(item.restockDate)).format(DATE_FORMAT_US),
192
}));
193

194
/* end:skip-in-preview */
195

196
// Get the DOM element with the ID 'example1' where the Handsontable will be rendered
197
const container = document.querySelector("#example1")!;
198

199
type EditorPropertiesType = {
200
  input: HTMLInputElement;
201
  pickaday: Pikaday;
202
  datePicker: HTMLDivElement;
203
  parentDestroyed: boolean;
204
};
205

206
// Helper type to extract the editor type from factory callbacks
207
type FactoryEditorType<TProps, TMethods> = Parameters<
208
  Parameters<
209
    typeof editorFactory<TProps, TMethods>
210
  >[0]["init"]
211
>[0];
212

213
type EditorMethodsType = {
214
  showDatepicker: (
215
    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,
216
    event: Event | undefined,
217
  ) => void;
218
  hideDatepicker: (
219
    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,
220
  ) => void;
221
  getDatePickerConfig: (
222
    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,
223
  ) => Pikaday.PikadayOptions;
224
  getDateFormat: (
225
    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,
226
  ) => string;
227
};
228

229
const cellDefinition: Pick<
230
  CellProperties,
231
  "renderer" | "validator" | "editor"
232
> = {
233
  renderer: rendererFactory(({ td, value, cellProperties }) => {
234
    td.innerText = moment(new Date(value), cellProperties.renderFormat).format(
235
      cellProperties.renderFormat,
236
    );
237
  }),
238

239
  editor: editorFactory<
240
    EditorPropertiesType,
241
    EditorMethodsType
242
  >({
243
    position: "portal",
244
    shortcuts: [{
245
      keys: [["ArrowLeft"]],
246
      callback: (editor, _event) => {
247
        //@ts-ignore
248
        editor.pickaday.adjustDate("subtract", 1);
249
        _event.preventDefault();
250
      },
251
    }, {
252
      keys: [["ArrowRight"]],
253
      callback: (editor, _event) => {
254
        //@ts-ignore
255
        editor.pickaday.adjustDate("add", 1);
256
        _event.preventDefault();
257
      },
258
    }, {
259
      keys: [["ArrowUp"]],
260
      callback: (editor, _event) => {
261
        //@ts-ignore
262
        editor.pickaday.adjustDate("subtract", 7);
263
        _event.preventDefault();
264
      },
265
    }, {
266
      keys: [["ArrowDown"]],
267
      callback: (editor, _event) => {
268
        //@ts-ignore
269
        editor.pickaday.adjustDate("add", 7);
270
        _event.preventDefault();
271
      },
272
    }],
273
    init(editor) {
274
      editor.parentDestroyed = false;
275
      // create the input element on init. This is a text input that color picker will be attached to.
276
      editor.input = editor.hot.rootDocument.createElement(
277
        "INPUT",
278
      ) as HTMLInputElement;
279

280
      //editor.showDatepicker = (editor, event) => {
281
      editor.datePicker = editor.container;
282

283
      /**
284
       * Prevent recognizing clicking on datepicker as clicking outside of table.
285
       */
286
      editor.hot.rootDocument.addEventListener("mousedown", (event) => {
287
        if (
288
          event.target &&
289
          (event.target as HTMLElement).classList.contains("pika-day")
290
        ) {
291
          editor.hideDatepicker(editor);
292
        }
293
      });
294

295
      // TODO: fix this https://github.com/handsontable/dev-handsontable/issues/3004
296
      // @ts-ignore
297
      // editor.hot.rootPortalElement.appendChild(editor.datePicker);
298
    },
299
    // afterInit(editor) {
300
    //   editor.pickaday = new Pikaday(editor.getDatePickerConfig(editor));
301
    // },
302
    getDatePickerConfig(editor) {
303
      const htInput = editor.input;
304
      const options: Pikaday.PikadayOptions = {};
305

306
      if (editor.cellProperties && editor.cellProperties.datePickerConfig) {
307
        Object.assign(options, editor.cellProperties.datePickerConfig);
308
      }
309
      const origOnSelect = options.onSelect;
310
      const origOnClose = options.onClose;
311

312
      options.field = htInput;
313
      options.trigger = htInput;
314
      options.container = editor.datePicker;
315
      options.bound = false;
316
      options.keyboardInput = false;
317
      options.format = options.format ?? editor.getDateFormat(editor);
318
      options.reposition = options.reposition || false;
319
      // Set the RTL to `false`. Due to the https://github.com/Pikaday/Pikaday/issues/647 bug, the layout direction
320
      // of the date picker is controlled by juggling the "dir" attribute of the root date picker element.
321
      options.isRTL = false;
322
      options.onSelect = function (date) {
323
        let dateStr;
324

325
        if (!isNaN(date.getTime())) {
326
          dateStr = moment(date).format(editor.getDateFormat(editor));
327
        }
328
        editor.setValue(dateStr);
329

330
        if (origOnSelect) {
331
          origOnSelect.call(editor.pickaday, date);
332
        }
333

334
        if (Handsontable.helper.isMobileBrowser()) {
335
          editor.hideDatepicker(editor);
336
        }
337
      };
338
      options.onClose = () => {
339
        if (!editor.parentDestroyed) {
340
          editor.finishEditing(false);
341
        }
342
        if (origOnClose) {
343
          origOnClose();
344
        }
345
      };
346

347
      return options;
348
    },
349
    hideDatepicker(editor) {
350
      editor.pickaday.hide();
351
    },
352
    showDatepicker(editor, event) {
353
      const dateFormat = editor.getDateFormat(editor);
354
      // TODO: view is not exported in the handsontable library d.ts, so we need to use @ts-ignore
355
      // @ts-ignore
356
      const isMouseDown = editor.hot.view.isMouseDown();
357
      const isMeta = event && "keyCode" in event
358
        ? Handsontable.helper.isFunctionKey((event as KeyboardEvent).keyCode)
359
        : false;
360
      let dateStr;
361

362
      editor.datePicker.style.display = "block";
363

364
      editor.pickaday = new Pikaday(editor.getDatePickerConfig(editor));
365

366
      // TODO: useMoment is not exported in the pikaday library d.ts, so we need to use @ts-ignore
367
      // @ts-ignore
368
      if (typeof editor.pickaday.useMoment === "function") {
369
        // @ts-ignore
370
        editor.pickaday.useMoment(moment);
371
      }
372
      // TODO: _onInputFocus is not exported in the pikaday library d.ts, so we need to use @ts-ignore
373
      // @ts-ignore
374
      editor.pickaday._onInputFocus = function () {};
375

376
      if (editor.originalValue) {
377
        dateStr = editor.originalValue;
378

379
        if (moment(dateStr, dateFormat, true).isValid()) {
380
          editor.pickaday.setMoment(moment(dateStr, dateFormat), true);
381
        }
382

383
        // workaround for date/time cells - pikaday resets the cell value to 12:00 AM by default, this will overwrite the value.
384
        if (editor.getValue() !== editor.originalValue) {
385
          editor.setValue(editor.originalValue);
386
        }
387

388
        if (!isMeta && !isMouseDown) {
389
          editor.setValue("");
390
        }
391
      } else if (editor.cellProperties.defaultDate) {
392
        dateStr = editor.cellProperties.defaultDate;
393

394
        if (moment(dateStr, dateFormat, true).isValid()) {
395
          editor.pickaday.setMoment(moment(dateStr, dateFormat), true);
396
        }
397

398
        if (!isMeta && !isMouseDown) {
399
          editor.setValue("");
400
        }
401
      } else {
402
        // if a default date is not defined, set a soft-default-date: display the current day and month in the
403
        // datepicker, but don't fill the editor input
404
        editor.pickaday.gotoToday();
405
      }
406
    },
407
    afterClose(editor) {
408
      if (editor.pickaday.destroy) {
409
        editor.pickaday.destroy();
410
      }
411
    },
412

413
    afterOpen(editor, event) {
414
      const cellRect = editor.TD.getBoundingClientRect();
415

416
      editor.input.style.width = `${cellRect.width}px`;
417
      editor.input.style.height = `${cellRect.height}px`;
418
      editor.showDatepicker(editor, event);
419
    },
420
    getValue(editor) {
421
      return editor.input.value;
422
    },
423
    setValue(editor, value) {
424
      editor.input.value = value;
425
    },
426
    getDateFormat(
427
      editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,
428
    ) {
429
      return editor.cellProperties.dateFormat ?? DEFAULT_DATE_FORMAT;
430
    },
431
  }),
432
};
433

434
// Define configuration options for the Handsontable
435
const hotOptions: Handsontable.GridSettings = {
436
  data,
437
  height: "auto",
438
  colHeaders: ["Item Name", "Category", "Lead Engineer", "Restock Date", "Cost"],
439
  autoRowSize: true,
440
  rowHeaders: true,
441
  width: "100%",
442
  autoWrapRow: true,
443
  headerClassName: "htLeft",
444
  columns: [
445
    { data: "itemName", type: "text", width: 130 },
446
    { data: "category", type: "text", width: 120 },
447
    { data: "leadEngineer", type: "text", width: 150 },
448
    {
449
      data: "restockDate",
450
      width: 150,
451
      allowInvalid: false,
452
      ...cellDefinition,
453
      renderFormat: DATE_FORMAT_US,
454
      dateFormat: DATE_FORMAT_US,
455
      correctFormat: true,
456
      defaultDate: "01/01/2020",
457
      datePickerConfig: {
458
        firstDay: 0,
459
        showWeekNumber: true,
460
        disableDayFn(date: Date) {
461
          return date.getDay() === 0 || date.getDay() === 6;
462
        },
463
      },
464
    },
465
    {
466
      data: "cost",
467
      type: "numeric",
468
      width: 120,
469
      className: "htRight",
470
      numericFormat: {
471
        pattern: "$0,0.00",
472
        culture: "en-US",
473
      },
474
    },
475
  ],
476
  licenseKey: "non-commercial-and-evaluation",
477
};
478

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

1
.ht_editor_visible > input {
2
  width: 100%;
3
  height: 100%;
4
  box-sizing: border-box !important;
5
  border: none;
6
  border-radius: 0;
7
  outline: none;
8
  margin-top: -1px;
9
  margin-left: -1px;
10
  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)
11
    var(--ht-cell-editor-border-color, #1a42e8),
12
    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0
13
    var(--ht-cell-editor-shadow-color, transparent) !important;
14
  background-color: var(--ht-cell-editor-background-color, #ffffff) !important;
15
  padding: var(--ht-cell-vertical-padding, 4px)
16
    var(--ht-cell-horizontal-padding, 8px) !important;
17
  border: none !important;
18
  font-family: inherit;
19
  font-size: var(--ht-font-size);
20
  line-height: var(--ht-line-height);
21
}
22
.ht_editor_visible > input:focus-visible {
23
  border: none !important;
24
  outline: none !important;
25
}

Overview

This guide shows how to create a custom date picker cell using Pikaday, a lightweight, no-dependencies date picker library. This guide is essential for migration - the built-in date cell type with Pikaday will be removed in the next Handsontable release. Use this recipe to maintain Pikaday functionality in your application.

Difficulty: Intermediate Time: ~25 minutes Libraries: @handsontable/pikaday, moment

What You’ll Build

A cell that:

Displays formatted dates (e.g., “12/31/2024” or “31/12/2024”)
Opens a beautiful calendar picker when edited
Supports per-column configuration (date formats, first day of week, disabled dates)
Handles keyboard navigation (arrow keys to navigate dates)
Auto-closes and saves when a date is selected
Works with portal positioning for better z-index handling

Prerequisites

1
npm install @handsontable/pikaday moment

Why these libraries?

@handsontable/pikaday - The Pikaday date picker library (Handsontable’s fork)
moment - Date formatting and parsing (can be replaced with date-fns, dayjs, etc.)

Import Dependencies

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import moment from 'moment';
4
import Pikaday from '@handsontable/pikaday';
5
import { CellProperties } from 'handsontable/settings';
6
import { editorFactory } from 'handsontable/editors';
7
import { rendererFactory } from 'handsontable/renderers';
8

9
registerAllModules();

What we’re importing:

Handsontable core and styles
editorFactory and rendererFactory for creating custom cell type components
Pikaday for date picker functionality
Moment for date formatting and parsing

Define Date Formats
```
1
const DATE_FORMAT_US = 'MM/DD/YYYY';
2
const DEFAULT_DATE_FORMAT = DATE_FORMAT_US;
```
Why constants?
- Reusability across renderer and column configuration
- Single source of truth
- Easy to add more formats (EU, ISO, custom, etc.)

Define TypeScript Types

Define types for editor properties and methods to ensure type safety.

1
type EditorPropertiesType = {
2
  input: HTMLInputElement;
3
  pickaday: Pikaday;
4
  datePicker: HTMLDivElement;
5
  parentDestroyed: boolean;
6
};
7

8
// Helper type to extract the editor type from factory callbacks
9
type FactoryEditorType<TProps, TMethods> = Parameters<
10
  Parameters<
11
    typeof editorFactory<TProps, TMethods>
12
  >[0]["init"]
13
>[0];
14

15
type EditorMethodsType = {
16
  showDatepicker: (
17
    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,
18
    event: Event | undefined,
19
  ) => void;
20
  hideDatepicker: (
21
    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,
22
  ) => void;
23
  getDatePickerConfig: (
24
    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,
25
  ) => Pikaday.PikadayOptions;
26
  getDateFormat: (
27
    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,
28
  ) => string;
29
};

What’s happening:

EditorPropertiesType: Defines custom properties added to the editor instance
FactoryEditorType: Helper to extract the correct editor type from factory callbacks
EditorMethodsType: Defines custom methods that will be available on the editor

Why this matters:

Provides full TypeScript type safety
Enables autocomplete in your IDE
Catches type errors at compile time

Create the Renderer

The renderer controls how the cell looks when not being edited.
```
1
renderer: rendererFactory(({ td, value, cellProperties }) => {
2
  td.innerText = moment(new Date(value), cellProperties.renderFormat).format(
3
    cellProperties.renderFormat,
4
  );
5
})
```
What’s happening:
- value is the raw date value (e.g., ISO string “2024-12-31” or formatted “12/31/2024”)
- cellProperties.renderFormat is a custom property we’ll set per column
- moment().format() converts to desired format
- Display the formatted date
Why use cellProperties?
- Allows different columns to display dates differently
- One cell definition, multiple configurations

Editor - Initialize (`init`)

Create the input element and set up event handling to prevent clicks on the datepicker from closing the editor.

1
init(editor) {
2
  editor.parentDestroyed = false;
3
  // Create the input element on init. This is a text input that date picker will be attached to.
4
  editor.input = editor.hot.rootDocument.createElement(
5
    'input',
6
  ) as HTMLInputElement;
7

8
  // Use the container as the date picker container
9
  editor.datePicker = editor.container;
10

11
  /**
12
   * Prevent recognizing clicking on datepicker as clicking outside of table.
13
   */
14
  editor.hot.rootDocument.addEventListener('mousedown', (event) => {
15
      if (
16
        event.target &&
17
        (event.target as HTMLElement).classList.contains('pika-day')
18
      ) {
19
        editor.hideDatepicker(editor);
20
      }
21
    },
22
  );
23
}

What’s happening:

Initialize parentDestroyed flag to track editor lifecycle
Create an input element using editor.hot.rootDocument.createElement()
Use the editor container as the Pikaday container
Create event listener to handle clicks on datepicker days
The editorFactory helper handles container creation and DOM insertion

Key concepts:

The `Event Listener` pattern

This is crucial! Without it:

User clicks cell to edit
Pikaday calendar opens
User clicks on a calendar day
Handsontable thinks user clicked “outside” the editor
Editor closes immediately!

Solution:

1
editor.hot.rootDocument.addEventListener('mousedown', (event) => {
2
  if ((event.target as HTMLElement).classList.contains('pika-day')) {
3
    editor.hideDatepicker(editor);
4
  }
5
});

Why `editor.hot.rootDocument.createElement()`?

Handsontable might be in an iframe or shadow DOM
editor.hot.rootDocument ensures correct document context
Ensures compatibility across different environments

Editor - Get Date Picker Config (`getDatePickerConfig`)

Build the Pikaday configuration object with proper callbacks.

1
getDatePickerConfig(editor) {
2
  const htInput = editor.input;
3
  const options: Pikaday.PikadayOptions = {};
4

5
  // Merge custom config from cell properties
6
  if (editor.cellProperties && editor.cellProperties.datePickerConfig) {
7
    Object.assign(options, editor.cellProperties.datePickerConfig);
8
  }
9
  const origOnSelect = options.onSelect;
10
  const origOnClose = options.onClose;
11

12
  // Configure Pikaday
13
  options.field = htInput;
14
  options.trigger = htInput;
15
  options.container = editor.datePicker;
16
  options.bound = false;
17
  options.keyboardInput = false;
18
  options.format = options.format ?? editor.getDateFormat(editor);
19
  options.reposition = options.reposition || false;
20
  options.isRTL = false;
21

22
  // Handle date selection
23
  options.onSelect = function (date) {
24
    let dateStr;
25

26
    if (!isNaN(date.getTime())) {
27
      dateStr = moment(date).format(editor.getDateFormat(editor));
28
    }
29
    editor.setValue(dateStr);
30

31
    if (origOnSelect) {
32
      origOnSelect.call(editor.pickaday, date);
33
    }
34

35
    if (Handsontable.helper.isMobileBrowser()) {
36
      editor.hideDatepicker(editor);
37
    }
38
  };
39

40
  // Handle date picker close
41
  options.onClose = () => {
42
    if (!editor.parentDestroyed) {
43
      editor.finishEditing(false);
44
    }
45
    if (origOnClose) {
46
      origOnClose();
47
    }
48
  };
49

50
  return options;
51
}

What’s happening:

Start with empty options object
Merge custom config from cellProperties.datePickerConfig (allows per-column customization)
Store original callbacks to preserve them
Configure Pikaday with editor-specific settings
Set up onSelect to format date and save value
Set up onClose to finish editing

Key configuration options:

field: The input element Pikaday attaches to
trigger: Element that triggers the picker (same as field)
container: Where to render the calendar (editor container)
bound: false: Don’t position relative to field
keyboardInput: false: Disable direct keyboard input (we handle it via shortcuts)
reposition: false: Don’t auto-reposition (we handle positioning)

Editor - Show Datepicker (`showDatepicker`)

Initialize and display the Pikaday calendar when the editor opens.

1
showDatepicker(editor, event) {
2
  const dateFormat = editor.getDateFormat(editor);
3
  // @ts-ignore
4
  const isMouseDown = editor.hot.view.isMouseDown();
5
  const isMeta = event && 'keyCode' in event
6
    ? Handsontable.helper.isFunctionKey((event as KeyboardEvent).keyCode)
7
    : false;
8
  let dateStr;
9

10
  editor.datePicker.style.display = 'block';
11

12
  // Create new Pikaday instance
13
  editor.pickaday = new Pikaday(editor.getDatePickerConfig(editor));
14

15
  // Configure Moment.js integration if available
16
  // @ts-ignore
17
  if (typeof editor.pickaday.useMoment === 'function') {
18
    // @ts-ignore
19
    editor.pickaday.useMoment(moment);
20
  }
21
  // @ts-ignore
22
  editor.pickaday._onInputFocus = function () {};
23

24
  // Handle existing value
25
  if (editor.originalValue) {
26
    dateStr = editor.originalValue;
27

28
    if (moment(dateStr, dateFormat, true).isValid()) {
29
      editor.pickaday.setMoment(moment(dateStr, dateFormat), true);
30
    }
31

32
    if (editor.getValue() !== editor.originalValue) {
33
      editor.setValue(editor.originalValue);
34
    }
35

36
    if (!isMeta && !isMouseDown) {
37
      editor.setValue('');
38
    }
39
  } else if (editor.cellProperties.defaultDate) {
40
    dateStr = editor.cellProperties.defaultDate;
41

42
    if (moment(dateStr, dateFormat, true).isValid()) {
43
      editor.pickaday.setMoment(moment(dateStr, dateFormat), true);
44
    }
45

46
    if (!isMeta && !isMouseDown) {
47
      editor.setValue('');
48
    }
49
  } else {
50
    editor.pickaday.gotoToday();
51
  }
52
}

What’s happening:

Get date format for parsing
Check if mouse is down or function key pressed (for special behavior)
Show the date picker container
Create new Pikaday instance with configuration
Configure Moment.js integration
Disable input focus handler (we handle focus ourselves)
Set initial date based on cell value, default date, or today

Key concepts:

Why create Pikaday instance in `showDatepicker`?

Pikaday instance is created fresh each time editor opens
Allows per-edit configuration changes
Ensures clean state for each edit session

The `isMeta` and `isMouseDown` checks

If function key (F2, etc.) or mouse is down, don’t clear the input
Preserves value when opening via keyboard or programmatically
Provides better UX for keyboard users

Editor - Hide Datepicker (hideDatepicker)

Close the Pikaday calendar.
```
1
hideDatepicker(editor) {
2
  editor.pickaday.hide();
3
}
```
Editor - After Open Hook (afterOpen)

Match the editor input dimensions to the cell and show the datepicker.
```
1
afterOpen(editor, event) {
2
  const cellRect = editor.TD.getBoundingClientRect();
3

4
  editor.input.style.width = `${cellRect.width}px`;
5
  editor.input.style.height = `${cellRect.height}px`;
6
  editor.showDatepicker(editor, event);
7
}
```
What’s happening:
1. Get the cell’s bounding rectangle for exact dimensions
2. Set the input width and height to match the cell
3. Show the datepicker
Why getBoundingClientRect?
- Provides pixel-perfect dimensions matching the cell
- Works correctly regardless of cell padding, borders, or theme
- The CSS file handles the visual styling (borders, padding, focus states)
Editor - After Close Hook (afterClose)

Clean up the Pikaday instance when the editor closes.
```
1
afterClose(editor) {
2
  if (editor.pickaday.destroy) {
3
    editor.pickaday.destroy();
4
  }
5
}
```
Why this matters:
- Pikaday creates DOM elements and event listeners
- Without cleanup, these accumulate over time
- Essential for long-running applications
Editor - Get Value and Set Value

Standard value management methods.
```
1
getValue(editor) {
2
  return editor.input.value;
3
}
4

5
setValue(editor, value) {
6
  editor.input.value = value;
7
}
```
Why simple?
- Pikaday automatically updates input.value when date is selected
- We just read/write the input value
- Formatting is handled by Pikaday and our onSelect callback

Editor - Get Date Format (`getDateFormat`)

Helper method to get the date format for the current cell.

1
getDateFormat(
2
  editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,
3
) {
4
  return editor.cellProperties.dateFormat ?? DEFAULT_DATE_FORMAT;
5
}

Editor - Keyboard Shortcuts

Add keyboard navigation for date selection.

1
shortcuts: [
2
  {
3
    keys: [['ArrowLeft']],
4
    callback: (editor, _event) => {
5
      editor.pickaday.adjustDate('subtract', 1);
6
      _event.preventDefault();
7
    },
8
  },
9
  {
10
    keys: [['ArrowRight']],
11
    callback: (editor, _event) => {
12
      editor.pickaday.adjustDate('add', 1);
13
      _event.preventDefault();
14
    },
15
  },
16
  {
17
    keys: [['ArrowUp']],
18
    callback: (editor, _event) => {
19
      editor.pickaday.adjustDate('subtract', 7);
20
      _event.preventDefault();
21
    },
22
  },
23
  {
24
    keys: [['ArrowDown']],
25
    callback: (editor, _event) => {
26
      editor.pickaday.adjustDate('add', 7);
27
      _event.preventDefault();
28
    },
29
  }
30
]

What’s happening:

ArrowLeft: Move back one day
ArrowRight: Move forward one day
ArrowUp: Move back one week (7 days)
ArrowDown: Move forward one week (7 days)

Editor - Portal Positioning

Use portal positioning for better z-index handling.
```
1
position: 'portal',
```
Why portal instead of container?
- Datepicker can extend beyond cell boundaries
- Portal ensures it’s always on top
- Better for complex layouts

Editor Input Styling (CSS)

Style the editor input to match Handsontable’s native editor appearance using CSS custom properties.

1
.ht_editor_visible > input {
2
  width: 100%;
3
  height: 100%;
4
  box-sizing: border-box !important;
5
  border: none;
6
  border-radius: 0;
7
  outline: none;
8
  margin-top: -1px;
9
  margin-left: -1px;
10
  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)
11
    var(--ht-cell-editor-border-color, #1a42e8),
12
    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0
13
    var(--ht-cell-editor-shadow-color, transparent) !important;
14
  background-color: var(--ht-cell-editor-background-color, #ffffff) !important;
15
  padding: var(--ht-cell-vertical-padding, 4px)
16
    var(--ht-cell-horizontal-padding, 8px) !important;
17
  border: none !important;
18
  font-family: inherit;
19
  font-size: var(--ht-font-size);
20
  line-height: var(--ht-line-height);
21
}
22
.ht_editor_visible > input:focus-visible {
23
  border: none !important;
24
  outline: none !important;
25
}

What’s happening:

Uses Handsontable’s CSS custom properties (--ht-cell-editor-*) for theme compatibility
inset box-shadow replaces borders for the blue editor highlight
-1px margins correct portal positioning offset
Inherits font properties from the table for consistency
:focus-visible overrides prevent browser default focus styles

Complete Cell Definition

Put it all together:

1
const cellDefinition: Pick<
2
  CellProperties,
3
  'renderer' | 'validator' | 'editor'
4
> = {
5
  renderer: rendererFactory(({ td, value, cellProperties }) => {
6
    td.innerText = moment(new Date(value), cellProperties.renderFormat).format(
7
      cellProperties.renderFormat,
8
    );
9
  }),
10

11
  editor: editorFactory<
12
    EditorPropertiesType,
13
    EditorMethodsType
14
  >({
15
    position: 'portal',
16
    shortcuts: [
17
      // ... keyboard shortcuts from Step 13
18
    ],
19
    init(editor) {
20
      // ... from Step 5
21
    },
22
    getDatePickerConfig(editor) {
23
      // ... from Step 6
24
    },
25
    hideDatepicker(editor) {
26
      // ... from Step 8
27
    },
28
    showDatepicker(editor, event) {
29
      // ... from Step 7
30
    },
31
    afterClose(editor) {
32
      // ... from Step 10
33
    },
34
    afterOpen(editor, event) {
35
      // ... from Step 9
36
    },
37
    getValue(editor) {
38
      // ... from Step 11
39
    },
40
    setValue(editor, value) {
41
      // ... from Step 11
42
    },
43
    getDateFormat(editor) {
44
      // ... from Step 12
45
    },
46
  }),
47
};

Use in Handsontable

1
const container = document.querySelector('#example1')!;
2

3
const hotOptions: Handsontable.GridSettings = {
4
  data,
5
  colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Restock Date', '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: 'restockDate',
18
      width: 150,
19
      allowInvalid: false,
20
      ...cellDefinition,
21
      renderFormat: DATE_FORMAT_US,
22
      dateFormat: DATE_FORMAT_US,
23
      correctFormat: true,
24
      defaultDate: '01/01/2020',
25
      datePickerConfig: {
26
        firstDay: 0,
27
        showWeekNumber: true,
28
        disableDayFn(date: Date) {
29
          return date.getDay() === 0 || date.getDay() === 6;
30
        },
31
      },
32
    },
33
    {
34
      data: 'cost',
35
      type: 'numeric',
36
      width: 120,
37
      className: 'htRight',
38
      numericFormat: {
39
        pattern: '$0,0.00',
40
        culture: 'en-US',
41
      },
42
    },
43
  ],
44
  licenseKey: 'non-commercial-and-evaluation',
45
};
46

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

Key configuration:

...cellDefinition - Spreads renderer and editor into the column config
renderFormat - Format for displaying dates in cells
dateFormat - Format for Pikaday date picker
datePickerConfig - Additional Pikaday configuration options
defaultDate - Default date when cell is empty
headerClassName: 'htLeft' - Left-aligns all column headers

How It Works - Complete Flow

Initial Load: Cell displays formatted date (e.g., “08/01/2025”)
User Double-Clicks or F2: Editor opens, container positioned in portal
After Open: Input sized to match cell via getBoundingClientRect, showDatepicker called
Show Datepicker: Pikaday instance created, calendar displayed
User Selects Date: onSelect callback fires, formats date, saves value
User Clicks Day: Event listener detects click, hides datepicker, finishes editing
After Close: Pikaday instance destroyed, memory cleaned up
Re-render: Cell displays updated formatted date

Migration from Built-in Date Cell Type

If you’re currently using the built-in date cell type with Pikaday, here’s how to migrate:

Before (Built-in):

1
columns: [{
2
  data: 'restockDate',
3
  type: 'date',
4
  dateFormat: 'MM/DD/YYYY',
5
  datePickerConfig: {
6
    firstDay: 0,
7
  }
8
}]

After (Custom Editor):

1
columns: [{
2
  data: 'restockDate',
3
  ...cellDefinition,  // Add the custom cell definition
4
  dateFormat: 'MM/DD/YYYY',
5
  renderFormat: 'MM/DD/YYYY',  // Add render format
6
  datePickerConfig: {
7
    firstDay: 0,
8
  }
9
}]

Key differences:

Replace type: "date" with ...cellDefinition
Add renderFormat property (for cell display)
Keep dateFormat and datePickerConfig (they work the same)

Enhancements

Different Date Formats per Column

1
columns: [
2
  {
3
    data: 'restockDate',
4
    ...cellDefinition,
5
    renderFormat: 'MM/DD/YYYY',  // US format
6
    dateFormat: 'MM/DD/YYYY',
7
  },
8
  {
9
    data: 'restockDate',
10
    ...cellDefinition,
11
    renderFormat: 'DD/MM/YYYY',  // EU format
12
    dateFormat: 'DD/MM/YYYY',
13
  }
14
]

Date Range Restrictions

1
datePickerConfig: {
2
  minDate: new Date('2024-01-01'),
3
  maxDate: new Date('2024-12-31'),
4
  disableDayFn(date) {
5
    // Disable weekends
6
    return date.getDay() === 0 || date.getDay() === 6;
7
  }
8
}

Custom Date Formatting

Replace Moment.js with another library:

1
import { format, parse } from 'date-fns';
2

3
// In renderer
4
renderer: rendererFactory(({ td, value, cellProperties }) => {
5
  td.innerText = format(new Date(value), cellProperties.renderFormat);
6
})
7

8
// In getDatePickerConfig
9
options.format = 'MM/DD/YYYY'; // Pikaday format string

Localization

1
import 'pikaday/css/pikaday.css';
2
import moment from 'moment';
3
import 'moment/locale/fr';
4

5
moment.locale('fr');
6

7
datePickerConfig: {
8
  i18n: {
9
    previousMonth: 'Mois précédent',
10
    nextMonth: 'Mois suivant',
11
    months: ['Janvier', 'Février', 'Mars', ...],
12
    weekdays: ['Dimanche', 'Lundi', 'Mardi', ...],
13
    weekdaysShort: ['Dim', 'Lun', 'Mar', ...]
14
  }
15
}

Accessibility

Pikaday has good keyboard support out of the box:

Keyboard navigation:

Arrow Keys: Navigate dates (via our shortcuts)
Enter: Select current date
Escape: Close datepicker
Tab: Navigate to next field
Page Up/Down: Navigate months
Home/End: Navigate to first/last day of month

ARIA attributes: Pikaday automatically adds ARIA attributes for screen readers.

Performance Considerations

Why This Is Fast

Lazy Initialization: Pikaday instance created only when editor opens
Efficient Cleanup: Instance destroyed when editor closes
Portal Positioning: Better z-index handling without performance cost

Congratulations! You’ve created a production-ready Pikaday date picker cell with full customization options, keyboard navigation, and proper lifecycle management. This recipe ensures you can continue using Pikaday even after the built-in date cell type is removed!

Pikaday

Overview

What You’ll Build

Prerequisites

Import Dependencies

Define Date Formats

Define TypeScript Types

Create the Renderer

Editor - Initialize (`init`)

The `Event Listener` pattern

Why `editor.hot.rootDocument.createElement()`?

Editor - Get Date Picker Config (`getDatePickerConfig`)

Editor - Show Datepicker (`showDatepicker`)

Why create Pikaday instance in `showDatepicker`?

The `isMeta` and `isMouseDown` checks

Editor - Hide Datepicker (`hideDatepicker`)

Editor - After Open Hook (`afterOpen`)

Editor - After Close Hook (`afterClose`)

Editor - Get Value and Set Value

Editor - Get Date Format (`getDateFormat`)

Editor - Keyboard Shortcuts

Editor - Portal Positioning

Editor Input Styling (CSS)

Complete Cell Definition

Use in Handsontable

How It Works - Complete Flow

Migration from Built-in Date Cell Type

Before (Built-in):

After (Custom Editor):

Enhancements

Different Date Formats per Column

Date Range Restrictions

Custom Date Formatting

Localization

Accessibility

Performance Considerations

Why This Is Fast

Pikaday

Overview

What You’ll Build

Prerequisites

Import Dependencies

Define Date Formats

Define TypeScript Types

Create the Renderer

Editor - Initialize (init)

The Event Listener pattern

Why editor.hot.rootDocument.createElement()?

Editor - Get Date Picker Config (getDatePickerConfig)

Editor - Show Datepicker (showDatepicker)

Why create Pikaday instance in showDatepicker?

The isMeta and isMouseDown checks

Editor - Hide Datepicker (hideDatepicker)

Editor - After Open Hook (afterOpen)

Editor - After Close Hook (afterClose)

Editor - Get Value and Set Value

Editor - Get Date Format (getDateFormat)

Editor - Keyboard Shortcuts

Editor - Portal Positioning

Editor Input Styling (CSS)

Complete Cell Definition

Use in Handsontable

How It Works - Complete Flow

Migration from Built-in Date Cell Type

Before (Built-in):

After (Custom Editor):

Enhancements

Different Date Formats per Column

Date Range Restrictions

Custom Date Formatting

Localization

Accessibility

Performance Considerations

Why This Is Fast

Editor - Initialize (`init`)

The `Event Listener` pattern

Why `editor.hot.rootDocument.createElement()`?

Editor - Get Date Picker Config (`getDatePickerConfig`)

Editor - Show Datepicker (`showDatepicker`)

Why create Pikaday instance in `showDatepicker`?

The `isMeta` and `isMouseDown` checks

Editor - Hide Datepicker (`hideDatepicker`)

Editor - After Open Hook (`afterOpen`)

Editor - After Close Hook (`afterClose`)

Editor - Get Date Format (`getDateFormat`)