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

MomentDateAdapter.setTime validates the hours argument (0-23) before mutating the target Moment. Out-of-range hours would produce an invalid or rolled-over date, so the adapter throws this descriptive error in ngDevMode. The same method separately guards minutes and seconds.

Source

Thrown at src/material-moment-adapter/adapter/moment-date-adapter.ts:248

    return super.deserialize(value);
  }

  isDateInstance(obj: unknown): obj is Moment {
    return moment.isMoment(obj);
  }

  isValid(date: Moment): boolean {
    return this.clone(date).isValid();
  }

  invalid(): Moment {
    return moment.invalid();
  }

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

      if (minutes < 0 || minutes > 59) {
        throw Error(`Invalid minutes "${minutes}". Minutes value must be between 0 and 59.`);
      }

      if (seconds < 0 || seconds > 59) {
        throw Error(`Invalid seconds "${seconds}". Seconds value must be between 0 and 59.`);
      }
    }

    return this.clone(target).set({hours, minutes, seconds, milliseconds: 0});
  }

  override getHours(date: Moment): number {
    return date.hours();
  }

View on GitHub (pinned to 0411926e7d)

Solutions

Clamp/validate hours to 0-23 before calling setTime.
Convert 12-hour input correctly: hour % 12 + (pm ? 12 : 0).
If adding durations, use addCalendarHours on a base time instead of pre-summing hours.
Confirm argument order (target, hours, minutes, seconds).

Example fix

// before
adapter.setTime(date, pickerHour + (isPm ? 12 : 0), 0, 0); // 12 PM becomes 24
// after
const hours24 = pickerHour % 12 + (isPm ? 12 : 0);
adapter.setTime(date, hours24, 0, 0);

Defensive patterns

Strategy: validation

Validate before calling

function canSetTime(h: number, m: number, s: number): boolean {
  return [h, m, s].every(Number.isInteger) && h >= 0 && h <= 23 && m >= 0 && m <= 59 && s >= 0 && s <= 59;
}

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(date, h, m, s);
} catch (e) {
  if (e instanceof Error && e.message.includes('Invalid hours')) {
    adapter.setTime(date, ((h % 24) + 24) % 24, m, s);
  } else throw e;
}

Prevention

Convert 12-hour input with hour % 12 + (pm ? 12 : 0)
Clamp hour inputs at the UI boundary
Use addCalendarHours for duration addition instead of summed values
Keep setTime argument order consistent via a wrapper function

When it happens

Trigger: Calling setTime(target, hours, minutes, seconds) with hours < 0 or hours > 23 — e.g. passing 12-hour-clock values like 24, or 1-12 hour fields from an AM/PM picker without conversion.

Common situations: 12-hour to 24-hour conversion mistakes (PM 12 vs 0/12), adding durations in hours and passing the raw sum, unvalidated inputs, misordered arguments so minutes land in the hours slot.

Related errors

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