React Data GridDate cell type

Use the date cell type to display, format, and validate date values. Pick a date using an interactive pop-up editor.

Usage

To set 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/@handsontable/pikaday@1.0.0/pikaday.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@handsontable/pikaday@1.0.0/css/pikaday.min.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.

Change 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'}

Autocorrect 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

Click on one of the ▼ icons to open an interactive date editor.