Date cell type

Table of contents

• Overview
• Usage
• Basic example

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.1/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">

All data entered into the date-type cells are validated against the default date format DD/MM/YYYY unless another format is provided. If you enable the correctFormat config item, the dates will be automatically formatted to match the desired format.

Basic example

const container = document.querySelector('#example1'); const hot = new Handsontable(container, { 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' } } ] }); <script src="https://cdn.jsdelivr.net/npm/handsontable@9.0/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@9.0/dist/handsontable.full.min.css" /> <div id="example1" class="hot "></div>

const container = document.querySelector('#example1');
const hot = new Handsontable(container, {
  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'
      }
    }
  ]
});