Time cell type

Table of contents

• Overview
• Usage
• Basic example

Overview

The time cell type formats, renders, and validates the contents of the cell as a time.

Usage

To use the time cell type, set the type: 'time' option in the columns array or the cells function. The time cell uses Moment.js (opens new window) as the time formatter, therefore you must add the following required dependency:

<script src="https://cdn.jsdelivr.net/npm/moment/moment.min.js"></script>

All data entered into the time-typed cells is eventually validated against the default time format - h:mm:ss a, which translates to, for example, 9:30:00 am unless another format is provided as the timeFormat. If you enable the correctFormat config item, the values will be automatically formatted to match the desired time format.

TIP

By default, the values entered into the time-type column are not validated, so if you want them to display in the proper format, remember to call hot.validateCells() after the table initialization.

Basic example

const container = document.querySelector('#example1'); const hot = new Handsontable(container, { data: [ ['Mercedes', 'A 160', 1332284400000, 6999.95], ['Citroen', 'C4 Coupe', '10 30', 8330], ['Audi', 'A4 Avant', '8:00 PM', 33900], ['Opel', 'Astra', 1332284400000, 7000], ['BMW', '320i Coupe', 1332284400000, 30500] ], colHeaders: ['Car', 'Model', 'Registration time', 'Price'], columnSorting: true, height: 'auto', licenseKey: 'non-commercial-and-evaluation', columns: [ { type: 'text', }, { // 2nd cell is simple text, no special options here }, { type: 'time', timeFormat: 'h:mm:ss a', correctFormat: true }, { type: 'numeric', numericFormat: { pattern: '$ 0,0.00' } } ] }); hot.validateCells(); <script src="https://cdn.jsdelivr.net/npm/handsontable@11.0/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@11.0/dist/handsontable.full.min.css" /> <div id="example1" class="hot "></div>

const container = document.querySelector('#example1');

const hot = new Handsontable(container, {
  data: [
    ['Mercedes', 'A 160', 1332284400000, 6999.95],
    ['Citroen', 'C4 Coupe', '10 30', 8330],
    ['Audi', 'A4 Avant', '8:00 PM', 33900],
    ['Opel', 'Astra', 1332284400000, 7000],
    ['BMW', '320i Coupe', 1332284400000, 30500]
  ],
  colHeaders: ['Car', 'Model', 'Registration time', 'Price'],
  columnSorting: true,
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation',
  columns: [
    {
      type: 'text',
    },
    {
      // 2nd cell is simple text, no special options here
    },
    {
      type: 'time',
      timeFormat: 'h:mm:ss a',
      correctFormat: true
    },
    {
      type: 'numeric',
      numericFormat: {
        pattern: '$ 0,0.00'
      }
    }
  ]
});

hot.validateCells();