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
Date format
- Change the date format
- Autocorrect invalid dates
Basic example
Related articles
- Related guides
- Related API reference

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>

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.

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^2.4.0",
    "handsontable": "15.0",
    "@handsontable/react-wrapper": "15.0"
  },
  
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handsontable</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
  </body>
</html>

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import ExampleComponent from "./ExampleComponent";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <ExampleComponent />
  </StrictMode>
);

import React from "react";
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      autoWrapRow={true}
      autoWrapCol={true}
      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,
            disableDayFn(date) {
              // Disable Sunday and Saturday
              return date.getDay() === 0 || date.getDay() === 6;
            },
          },
        },
        {
          type: 'numeric',
          numericFormat: {
            pattern: '$ 0,0.00',
          },
        },
      ]}
    />
  );
};

export default ExampleComponent;

import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      autoWrapRow={true}
      autoWrapCol={true}
      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,
            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@15.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.0/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.0/styles/ht-theme-main.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.0/styles/ht-theme-horizon.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react-wrapper@15.0/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div id="example1" class="hot ht-theme-main-dark-auto "></div>

Cell type