angular/components · error · Error

Invalid hours "${hours}". Hours value must be between 0 and

Error message

Invalid hours "${hours}". Hours value must be between 0 and 23.

What it means

NativeDateAdapter.setTime sets the time-of-day on a cloned Date and validates each component in dev mode. Hours outside 0-23 would roll over into the next/previous day via Date's overflow behavior, so out-of-range values are rejected.

Source

Thrown at src/material/core/datetime/native-date-adapter.ts:247

    return super.deserialize(value);
  }

  isDateInstance(obj: any) {
    return obj instanceof Date;
  }

  isValid(date: Date) {
    return !isNaN(date.getTime());
  }

  invalid(): Date {
    return new Date(NaN);
  }

  override setTime(target: Date, hours: number, minutes: number, seconds: number): Date {
    if (typeof ngDevMode === 'undefined' || ngDevMode) {
      if (!inRange(hours, 0, 23)) {
        throw Error(`Invalid hours "${hours}". Hours value must be between 0 and 23.`);
      }

      if (!inRange(minutes, 0, 59)) {
        throw Error(`Invalid minutes "${minutes}". Minutes value must be between 0 and 59.`);
      }

      if (!inRange(seconds, 0, 59)) {
        throw Error(`Invalid seconds "${seconds}". Seconds value must be between 0 and 59.`);
      }
    }

    const clone = this.clone(target);
    clone.setHours(hours, minutes, seconds, 0);
    return clone;
  }

  override getHours(date: Date): number {
    return date.getHours();

View on GitHub (pinned to 0411926e7d)

Solutions

Convert 12-hour input correctly: 12 AM -> 0, 12 PM -> 12, before calling setTime.
Validate inRange(hours, 0, 23) on inputs before calling.
Use adapter.addCalendarHours to add durations instead of mutating hour arithmetic.

Example fix

// before
adapter.setTime(target, 24, 0, 0); // meant midnight
// after
adapter.setTime(target, 0, 0, 0);

Defensive patterns

Strategy: validation

Validate before calling

if (!Number.isInteger(hours) || hours < 0 || hours > 23) {
  throw new RangeError(`hours must be 0-23, got ${hours}`);
}
adapter.setTime(target, hours, minutes, seconds);

Type guard

function isValidHours(h: unknown): h is number {
  return typeof h === 'number' && Number.isInteger(h) && h >= 0 && h <= 23;
}

Try / catch

try {
  adapter.setTime(target, hours, m, s);
} catch (e) {
  if (e instanceof Error && e.message.includes('Invalid hours')) {
    logger.warn(`hour ${hours} out of range, clamping`);
    adapter.setTime(target, ((hours % 24) + 24) % 24, m, s);
  } else { throw e; }
}

Prevention

Convert 12-hour times correctly (12 AM -> 0, 12 PM -> 12).
Reject or normalize '24:00' style inputs at the form layer.
Use adapter.addCalendarHours for hour arithmetic.

When it happens

Trigger: Calling adapter.setTime(target, hours, minutes, seconds) with hours not in [0,23] — e.g. 12-hour-clock values like 24 for midnight, or unvalidated user/parsed input (often via _parseTimeString paths).

Common situations: Converting '12:00 AM' to 24 and passing it through; spreadsheet/CSV time columns with values like 24:00; modular arithmetic errors when adding durations to hours.

Related errors

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/4a0c2260586b9fd9. Report an issue: GitHub.