diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index efbc4bcebe..7dc8ec680f 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -15,7 +15,7 @@ import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+import { DatetimeChangeEventDetail, DatetimeFormatOptions, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 import { CounterFormatter } from "./components/item/item-interface";
@@ -51,7 +51,7 @@ export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+export { DatetimeChangeEventDetail, DatetimeFormatOptions, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 export { CounterFormatter } from "./components/item/item-interface";
@@ -861,7 +861,7 @@ export namespace Components {
         /**
           * Formatting options, separated by date and time.
          */
-        "formatOptions"?: { date?: Intl.DateTimeFormatOptions; time?: Intl.DateTimeFormatOptions };
+        "formatOptions"?: DatetimeFormatOptions;
         /**
           * Used to apply custom text and background colors to specific dates.  Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.  Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.
          */
@@ -5548,7 +5548,7 @@ declare namespace LocalJSX {
         /**
           * Formatting options, separated by date and time.
          */
-        "formatOptions"?: { date?: Intl.DateTimeFormatOptions; time?: Intl.DateTimeFormatOptions };
+        "formatOptions"?: DatetimeFormatOptions;
         /**
           * Used to apply custom text and background colors to specific dates.  Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.  Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.
          */
diff --git a/core/src/components/datetime/datetime-interface.ts b/core/src/components/datetime/datetime-interface.ts
index 255f39e22d..962011e1f6 100644
--- a/core/src/components/datetime/datetime-interface.ts
+++ b/core/src/components/datetime/datetime-interface.ts
@@ -36,3 +36,8 @@ export type DatetimeHighlight = { date: string } & DatetimeHighlightStyle;
 export type DatetimeHighlightCallback = (dateIsoString: string) => DatetimeHighlightStyle | undefined;
 
 export type DatetimeHourCycle = 'h11' | 'h12' | 'h23' | 'h24';
+
+// export type TimeFormatOptions = { time: Intl.DateTimeFormatOptions };
+// export type DateFormatOptions = { date: Intl.DateTimeFormatOptions };
+// export type DatetimeFormatOptions = TimeFormatOptions | DateFormatOptions;
+export type DatetimeFormatOptions = { date?: Intl.DateTimeFormatOptions; time?: Intl.DateTimeFormatOptions };
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index b9c1afe6fa..b728c65091 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -20,6 +20,7 @@ import type {
   DatetimeHighlightStyle,
   DatetimeHighlightCallback,
   DatetimeHourCycle,
+  DatetimeFormatOptions,
 } from './datetime-interface';
 import { isSameDay, warnIfValueOutOfBounds, isBefore, isAfter } from './utils/comparison';
 import {
@@ -174,13 +175,10 @@ export class Datetime implements ComponentInterface {
   /**
    * Formatting options, separated by date and time.
    */
-  @Prop() formatOptions?: { date?: Intl.DateTimeFormatOptions; time?: Intl.DateTimeFormatOptions };
+  @Prop() formatOptions?: DatetimeFormatOptions;
 
   @Watch('formatOptions')
-  protected formatOptionsChanged(formatOptions: {
-    date?: Intl.DateTimeFormatOptions;
-    time?: Intl.DateTimeFormatOptions;
-  }) {
+  protected formatOptionsChanged(formatOptions: DatetimeFormatOptions) {
     this.errorIfTimeZoneProvided(formatOptions);
   }
 
@@ -1426,10 +1424,7 @@ export class Datetime implements ComponentInterface {
     this.emitStyle();
   }
 
-  private errorIfTimeZoneProvided(formatOptions: {
-    date?: Intl.DateTimeFormatOptions;
-    time?: Intl.DateTimeFormatOptions;
-  }) {
+  private errorIfTimeZoneProvided(formatOptions: DatetimeFormatOptions) {
     if (
       formatOptions?.date?.timeZone ||
       formatOptions?.time?.timeZone ||