handsontable/handsontable · warning

TimeEditor: value must be in 24-hour time format ("HH:mm", "

Error message

TimeEditor: value must be in 24-hour time format ("HH:mm", "HH:mm:ss" or "HH:mm:ss.SSS") required by the native time input. Received:

What it means

TimeEditor backs the native `<input type="time">`, which accepts only 24-hour times: "HH:mm", "HH:mm:ss", or "HH:mm:ss.SSS". If the value set on the editor does not match, Handsontable warns and clears the input to keep the native control valid.

Source

Thrown at handsontable/src/editors/timeEditor/timeEditor.ts:48

    });
  }

  /**
   * Creates the editor's textarea element as a native time input.
   */
  createElements(type?: string): void {
    super.createElements('input');

    this.TEXTAREA.setAttribute('type', 'time');
    this.TEXTAREA.setAttribute('dir', 'ltr');
  }

  /**
   * Sets the editor value and warns if the value does not match the 24-hour time format required by the native time input.
   */
  setValue(value?: unknown): void {
    if (!isValidTime(value)) {
      warn(toSingleLine`TimeEditor: value must be in 24-hour time format ("HH:mm", "HH:mm:ss" or "HH:mm:ss.SSS")\x20
        required by the native time input. Received:`, value);

      super.setValue('');

      return;
    }

    super.setValue(value);
  }

  /**
   * Selects all text in the time input element when the editor receives focus.
   */
  focus(): void {
    this.TEXTAREA.select();
  }

  /**

View on GitHub (pinned to 2c365a3291)

Solutions

  1. Normalize times to 24-hour "HH:mm[:ss[.SSS]]" before loading them into the grid
  2. Use a beforeChange hook or data getter to convert 12-hour times
  3. Validate/fix upstream data at import time
  4. Use a text column with a custom renderer if you must display other formats

Example fix

// before
value = '09:30 PM';
// after
value = '21:30'; // convert to 24-hour HH:mm
Defensive patterns

Strategy: validation

Validate before calling

const TIME = /^([01]\d|2[0-3]):[0-5]\d(:[0-5]\d(\.\d{1,3})?)?$/;
if (!TIME.test(String(value))) value = convertTo24h(value);

Type guard

function isValidTime(v) {
  return typeof v === 'string' && /^([01]\d|2[0-3]):[0-5]\d(:[0-5]\d(\.\d{1,3})?)?$/.test(v);
}

Prevention

When it happens

Trigger: Cell values like "9:30", "09:30 AM", "09:30 AM/PM" 12-hour strings, "25:99", or Date objects passed to a time-typed column.

Common situations: Importing 12-hour formatted times; user data from spreadsheets with AM/PM; APIs returning times with date prefixes or timezone info.

Related errors


AI-assisted analysis of handsontable/handsontable@2c365a3291 (2026-09-01). Data as JSON: /api/errors/defe5bc59c02b7a5. Report an issue: GitHub.