angular/components · error
Invalid seconds "${seconds}". Seconds value must be between
Error message
Invalid seconds "${seconds}". Seconds value must be between 0 and 59. What it means
DateFnsAdapter.setTime validates the seconds argument (must be 0–59) and throws in dev mode when out of range, rejecting values that would silently overflow into the next minute.
Source
Thrown at src/material-date-fns-adapter/adapter/date-fns-adapter.ts:231
return isValid(date);
}
invalid(): Date {
return new Date(NaN);
}
override setTime(target: Date, hours: number, minutes: number, seconds: number): Date {
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 set(this.clone(target), {hours, minutes, seconds, milliseconds: 0});
}
override getHours(date: Date): number {
return getHours(date);
}
override getMinutes(date: Date): number {
return getMinutes(date);
}
override getSeconds(date: Date): number {
return getSeconds(date);
}
View on GitHub (pinned to 0411926e7d)
Solutions
- Use addCalendarSeconds (or date-fns set with arithmetic) for values that may exceed 59.
- Validate inputs to 0–59 before calling setTime.
- Convert durations via explicit normalization (carry into minutes) before applying.
Example fix
// before this.adapter.setTime(target, 10, 30, 60); // throws // after this.adapter.setTime(this.adapter.addCalendarSeconds(target, 60), 0, 0, 0); // or 10:31:00 via wrap
Defensive patterns
Strategy: validation
Validate before calling
if (!Number.isInteger(seconds) || seconds < 0 || seconds > 59) {
throw new RangeError(`seconds must be 0-59, got ${seconds}`);
}
const d = adapter.setTime(target, hours, minutes, seconds); Type guard
function isValidSecond(s: unknown): s is number {
return typeof s === 'number' && Number.isInteger(s) && s >= 0 && s <= 59;
} Try / catch
try {
return this.adapter.setTime(t, h, m, s);
} catch (e) {
if ((e as Error).message.startsWith('Invalid seconds')) {
return this.adapter.setTime(t, h, m, Math.min(Math.max(s, 0), 59));
}
throw e;
} Prevention
- Use addCalendarSeconds for countdown/duration values that can exceed 59
- Normalize durations (carry seconds into minutes) before setting clock time
- Validate extracted clock components before setTime
- Distinguish durations from clock times in your date utility layer
When it happens
Trigger: Calling setTime(target, hours, minutes, seconds) with seconds < 0 or seconds > 59 — e.g. countdown arithmetic producing second = 60, or raw timestamp components (epoch seconds) fed as clock seconds.
Common situations: Stopwatch/countdown logic decrementing seconds to -1 or summing past 59; extracting seconds from durations instead of actual clock times; parsing 'mm:ss' strings without bounds checks.
Related errors
- Invalid hours "${hours}". Hours value must be between 0 and
- Invalid minutes "${minutes}". Minutes value must be between
- Invalid month index "${month}". Month index has to be betwee
- Invalid date "${date}". Date has to be greater than 0.
- Invalid date "${date}" for month with index "${month}".
AI-assisted analysis of angular/components@0411926e7d (2026-08-31).
Data as JSON: /api/errors/50a239f27c43e916.
Report an issue: GitHub.