JavaScript Data Grid Date cell type

Overview

The 'date' cell type is used to display a date in a cell or column.

Usage

To trigger the date cell type, use the option type: 'date' in the columns array or cells function. The date cell uses Pikaday datepicker (opens new window) as the UI control. Pikaday uses Moment.js (opens new window) as a date formatter.

Note that date cell requires additional modules :

<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pikaday@1.8.2/pikaday.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pikaday@1.8.2/css/pikaday.css">

Date format

date cells accept strings that are formatted in line with the dateFormat setting.

The default date format is 'DD/MM/YYYY'.

Handsontable doesn't support JavaScript's Date object.

Changing the date format

To change the date format accepted by date cells, set the dateFormat configuration option to a string with your preferred format. For example:

dateFormat: 'YYYY-MM-DD',

Autocorrecting invalid dates

By default, when the user enters a date in a format that doesn't match the dateFormat setting, the date is treated as invalid.

You can let Handsontable correct such dates automatically, so they match the required format. To do this, set the correctFormat option to true. For example:

dateFormat: 'YYYY-MM-DD',

// default behavior
// date entered as `30/12/2022` will be invalid
correctFormat: false,

// date entered as `30/12/2022` will be corrected to `2022/12/30`
correctFormat: true,

Basic example