React Data Grid Date cell type

Overview
Usage
Date format
- Changing the date format
- Autocorrecting invalid dates
Basic example
Related articles
- Related guides
- Related API reference

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

import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      licenseKey="non-commercial-and-evaluation"
      data={[
        ['Mercedes', 'A 160', '01/14/2021', 6999.95],
        ['Citroen', 'C4 Coupe', '12/01/2022', 8330],
        ['Audi', 'A4 Avant', '11/19/2023', 33900],
        ['Opel', 'Astra', '02/02/2021', 7000],
        ['BMW', '320i Coupe', '07/24/2022', 30500]
      ]}
      colHeaders={['Car', 'Model', 'Registration date', 'Price']}
      height="auto"
      columns={[{
          type: 'text',
        },
        {
          // 2nd cell is simple text, no special options here
        },
        {
          type: 'date',
          dateFormat: 'MM/DD/YYYY',
          correctFormat: true,
          defaultDate: '01/01/1900',
          // datePicker additional options
          // (see https://github.com/dbushell/Pikaday#configuration)
          datePickerConfig: {
            // First day of the week (0: Sunday, 1: Monday, etc)
            firstDay: 0,
            showWeekNumber: true,
            numberOfMonths: 3,
            licenseKey: 'non-commercial-and-evaluation',
            disableDayFn(date) {
              // Disable Sunday and Saturday
              return date.getDay() === 0 || date.getDay() === 6;
            }
          }
        },
        {
          type: 'numeric',
          numericFormat: {
            pattern: '$ 0,0.00'
          }
        }
      ]}
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.1/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.1/scripts/fixer.js"></script>
<script src="https://handsontable.com/docs/12.1/scripts/helpers.js"></script>

<div id="example1" class="hot "></div>

Cell type

← Numeric cell type Time cell type →