ionic-team/ionic-framework · error · Error

Invalid hour cycle "${hourCycle}"

Error message

Invalid hour cycle "${hourCycle}"

What it means

Thrown by getHourData() inside ion-datetime's time-generation pipeline when the resolved hourCycle is not one of 'h11', 'h12', 'h23', or 'h24'. The switch has no other cases, so any other value falls to the default branch. The DatetimeHourCycle type already constrains the input at compile time, so a runtime hit almost always means the value was cast to the type unsafely or came from a corrupted/partially-initialized state.

Source

Thrown at core/src/components/datetime/utils/data.ts:193

  return days;
};

/**
 * Returns an array of pre-defined hour
 * values based on the provided hourCycle.
 */
const getHourData = (hourCycle: DatetimeHourCycle) => {
  switch (hourCycle) {
    case 'h11':
      return hour11;
    case 'h12':
      return hour12;
    case 'h23':
      return hour23;
    case 'h24':
      return hour24;
    default:
      throw new Error(`Invalid hour cycle "${hourCycle}"`);
  }
};

/**
 * Given a local, reference datetime parts and option
 * max/min bound datetime parts, calculate the acceptable
 * hour and minute values according to the bounds and locale.
 */
export const generateTime = (
  locale: string,
  refParts: DatetimeParts,
  hourCycle: DatetimeHourCycle = 'h12',
  minParts?: DatetimeParts,
  maxParts?: DatetimeParts,
  hourValues?: number[],
  minuteValues?: number[]
) => {
  const computedHourCycle = getHourCycle(locale, hourCycle);

View on GitHub (pinned to 625f9c38ad)

Solutions

1. Do not pass hourCycle directly; let ion-datetime derive it from the locale via its preferredHours/hourCycle prop, or set hourCycle explicitly to one of the four valid literals.
2. If you compute hourCycle yourself, validate it against the set {'h11','h12','h23','h24'} before assigning it to the component or feeding generateTime.
3. Search the codebase for `as DatetimeHourCycle` / `as any` casts on hourCycle and replace them with a runtime check.
4. Clear node_modules/build cache and rebuild if the value appears after an Ionic upgrade.

Example fix

// before
const hc = (config.hourCycle as any) as DatetimeHourCycle; // e.g. 'H12' slips through
<ion-datetime hour-cycle={hc}></ion-datetime>

// after
const VALID = ['h11','h12','h23','h24'] as const;
const hc = VALID.includes(config.hourCycle) ? config.hourCycle : 'h12';
<ion-datetime hour-cycle={hc}></ion-datetime>

const VALID_HOUR_CYCLES = ['h11','h12','h23','h24'] as const;
function resolveHourCycle(input: unknown): DatetimeHourCycle {
  return (VALID_HOUR_CYCLES as readonly string[]).includes(input as string)
    ? (input as DatetimeHourCycle)
    : 'h12';
}

function isDatetimeHourCycle(v: unknown): v is DatetimeHourCycle {
  return v === 'h11' || v === 'h12' || v === 'h23' || v === 'h24';
}

try {
  datetime.generateTime(locale, parts, hourCycle);
} catch (e) {
  if (e instanceof Error && /Invalid hour cycle/.test(e.message)) {
    // fall back to a safe cycle and retry render
    hourCycle = 'h12';
  } else { throw e; }
}

When it happens

Trigger: generateTime() is called (e.g. while rendering the ion-datetime time wheel) and the computedHourCycle passed into getHourData() is undefined, an empty string, a typo like 'H12', or a locale-derived value that bypassed getHourCycle's validation. Also reachable by directly importing and calling getHourData with an arbitrary string.

Common situations: Passing hourCycle via a generic <any> cast or reading it from a config file/URL query without validation; SSR or test environments where Intl returns unexpected shapes; upgrading Ionic and a stale cache serves an old value.

Related errors

• Invalid hour cycle "${hourCycle}"
• Hour value not found from DateTimeFormat
• Invalid hour cycle "${hourCycle}"
• No day of week provided
• No day provided

AI-assisted analysis of ionic-team/ionic-framework@625f9c38ad (2026-08-12). Data as JSON: /api/errors/0d652bad77d94ff9. Report an issue: GitHub.