From f74ec55902aee4df39938f3e160b070bcf5956a4 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Wed, 14 Feb 2024 16:39:12 -0500
Subject: [PATCH 1/5] docs(datetime,datetime-button): document formatOptions
 property

---
 docs/api/datetime-button.md                   |  8 ++++
 docs/api/datetime.md                          | 12 ++++++
 .../datetime-button/format-options/angular.md | 24 +++++++++++
 .../datetime-button/format-options/demo.html  | 41 +++++++++++++++++++
 .../datetime-button/format-options/index.md   | 17 ++++++++
 .../format-options/javascript.md              | 22 ++++++++++
 .../datetime-button/format-options/react.md   | 32 +++++++++++++++
 .../v7/datetime-button/format-options/vue.md  | 31 ++++++++++++++
 .../v7/datetime/format-options/angular.md     | 11 +++++
 .../v7/datetime/format-options/demo.html      | 32 +++++++++++++++
 .../usage/v7/datetime/format-options/index.md | 17 ++++++++
 .../v7/datetime/format-options/javascript.md  | 13 ++++++
 .../usage/v7/datetime/format-options/react.md | 19 +++++++++
 .../usage/v7/datetime/format-options/vue.md   | 17 ++++++++
 14 files changed, 296 insertions(+)
 create mode 100644 static/usage/v7/datetime-button/format-options/angular.md
 create mode 100644 static/usage/v7/datetime-button/format-options/demo.html
 create mode 100644 static/usage/v7/datetime-button/format-options/index.md
 create mode 100644 static/usage/v7/datetime-button/format-options/javascript.md
 create mode 100644 static/usage/v7/datetime-button/format-options/react.md
 create mode 100644 static/usage/v7/datetime-button/format-options/vue.md
 create mode 100644 static/usage/v7/datetime/format-options/angular.md
 create mode 100644 static/usage/v7/datetime/format-options/demo.html
 create mode 100644 static/usage/v7/datetime/format-options/index.md
 create mode 100644 static/usage/v7/datetime/format-options/javascript.md
 create mode 100644 static/usage/v7/datetime/format-options/react.md
 create mode 100644 static/usage/v7/datetime/format-options/vue.md

diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md
index 62d4a91c7e0..c04d50eb564 100644
--- a/docs/api/datetime-button.md
+++ b/docs/api/datetime-button.md
@@ -35,6 +35,14 @@ import Basic from '@site/static/usage/v7/datetime-button/basic/index.md';
 
 The localized text on `ion-datetime-button` is determined by the `locale` property on the associated `ion-datetime` instance. See [Datetime Localization](./datetime#localization) for more details.
 
+## Format Options
+
+You can customize the format of the date and time in a Datetime Button by providing `formatOptions`. See [Datetime Format Options](./datetime#format-options) for more details.
+
+import FormatOptions from '@site/static/usage/v7/datetime-button/format-options/index.md';
+
+<FormatOptions />
+
 ## Usage with Modals and Popovers
 
 `ion-datetime-button` must be associated with a mounted `ion-datetime` instance. As a result, [Inline Modals](./modal#inline-modals-recommended) and [Inline Popovers](./popover#inline-popovers) with the `keepContentsMounted` property set to `true` must be used.
diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index cf9ed3071f7..46b58154769 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -246,6 +246,18 @@ import Wheel from '@site/static/usage/v7/datetime/presentation/wheel/index.md';
 
 <Wheel />
 
+## Format Options
+
+You can customize the format of the date in the header text and the time in the time button of a Datetime component by providing `formatOptions`. The `date` and `time` in the `formatObjects` property should each be an [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) object. If `formatObjects` is not provided, default formats will be used for dates and times.
+
+If `timeZone` or `timeZoneName` are provided, they will be ignored, and the time zone will be set to UTC. This ensures that the displayed value matches the selected value, rather than being converted to the user's current time zone.
+
+Be careful with the options you provide, as they may not match the selected presentation. For example, providing `minute: 'numeric'` for a presentation of `month` may lead to unexpected behavior, displaying a month where only a time might be expected.
+
+import FormatOptions from '@site/static/usage/v7/datetime/format-options/index.md';
+
+<FormatOptions />
+
 ## Multiple Date Selection
 
 If the `multiple` property is set to `true`, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it.
diff --git a/static/usage/v7/datetime-button/format-options/angular.md b/static/usage/v7/datetime-button/format-options/angular.md
new file mode 100644
index 00000000000..72570e5242b
--- /dev/null
+++ b/static/usage/v7/datetime-button/format-options/angular.md
@@ -0,0 +1,24 @@
+```html
+<ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+<ion-modal [keepContentsMounted]="true">
+  <ng-template>
+    <ion-datetime
+      id="datetime"
+      presentation="date-time"
+      value="2023-11-02T01:22:00"
+      [formatOptions]="{
+        date: {
+          weekday: 'short',
+          month: 'long',
+          day: '2-digit',
+        },
+        time: {
+          hour: '2-digit',
+          minute: '2-digit',
+        },
+      }"
+    ></ion-datetime>
+  </ng-template>
+</ion-modal>
+```
diff --git a/static/usage/v7/datetime-button/format-options/demo.html b/static/usage/v7/datetime-button/format-options/demo.html
new file mode 100644
index 00000000000..e768b7cbf78
--- /dev/null
+++ b/static/usage/v7/datetime-button/format-options/demo.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Datetime Button</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+          <ion-modal keep-contents-mounted="{true}">
+            <ion-datetime id="datetime" presentation="date-time" value="2023-11-02T01:22:00"></ion-datetime>
+          </ion-modal>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const datetime = document.querySelector('ion-datetime');
+      datetime.formatOptions = {
+        date: {
+          weekday: 'short',
+          month: 'long',
+          day: '2-digit',
+        },
+        time: {
+          hour: '2-digit',
+          minute: '2-digit',
+        },
+      };
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/datetime-button/format-options/index.md b/static/usage/v7/datetime-button/format-options/index.md
new file mode 100644
index 00000000000..3dac7f2bf05
--- /dev/null
+++ b/static/usage/v7/datetime-button/format-options/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/datetime-button/format-options/demo.html"
+/>
diff --git a/static/usage/v7/datetime-button/format-options/javascript.md b/static/usage/v7/datetime-button/format-options/javascript.md
new file mode 100644
index 00000000000..67eb934994c
--- /dev/null
+++ b/static/usage/v7/datetime-button/format-options/javascript.md
@@ -0,0 +1,22 @@
+```html
+<ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+<ion-modal keep-contents-mounted="{true}">
+  <ion-datetime id="datetime" presentation="date-time" value="2023-11-02T01:22:00"></ion-datetime>
+</ion-modal>
+
+<script>
+  const datetime = document.querySelector('ion-datetime');
+  datetime.formatOptions = {
+    date: {
+      weekday: 'short',
+      month: 'long',
+      day: '2-digit',
+    },
+    time: {
+      hour: '2-digit',
+      minute: '2-digit',
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/datetime-button/format-options/react.md b/static/usage/v7/datetime-button/format-options/react.md
new file mode 100644
index 00000000000..cf774d2cc98
--- /dev/null
+++ b/static/usage/v7/datetime-button/format-options/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React from 'react';
+import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonDatetimeButton datetime="datetime"></IonDatetimeButton>
+
+      <IonModal keepContentsMounted={true}>
+        <IonDatetime
+          id="datetime"
+          presentation="date-time"
+          value="2023-11-02T01:22:00"
+          formatOptions={{
+            date: {
+              weekday: 'short',
+              month: 'long',
+              day: '2-digit',
+            },
+            time: {
+              hour: '2-digit',
+              minute: '2-digit',
+            },
+          }}
+        ></IonDatetime>
+      </IonModal>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime-button/format-options/vue.md b/static/usage/v7/datetime-button/format-options/vue.md
new file mode 100644
index 00000000000..5bb7f801d98
--- /dev/null
+++ b/static/usage/v7/datetime-button/format-options/vue.md
@@ -0,0 +1,31 @@
+```html
+<template>
+  <ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+  <ion-modal :keep-contents-mounted="true">
+    <ion-datetime
+      id="datetime"
+      presentation="date-time"
+      value="2023-11-02T01:22:00"
+      :format-options="formatOptions"
+    ></ion-datetime>
+  </ion-modal>
+</template>
+
+<script lang="ts" setup>
+  import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  const formatOptions = {
+    date: {
+      weekday: 'short',
+      month: 'long',
+      day: '2-digit',
+    },
+    time: {
+      hour: '2-digit',
+      minute: '2-digit',
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/datetime/format-options/angular.md b/static/usage/v7/datetime/format-options/angular.md
new file mode 100644
index 00000000000..8453ac416e8
--- /dev/null
+++ b/static/usage/v7/datetime/format-options/angular.md
@@ -0,0 +1,11 @@
+```html
+<ion-datetime
+  value="2023-11-02T01:22:00"
+  [formatOptions]="{
+      time: { hour: '2-digit', minute: '2-digit' },
+      date: { day: '2-digit', month: 'long' },
+    }"
+>
+  <span slot="title">Select Date</span>
+</ion-datetime>
+```
diff --git a/static/usage/v7/datetime/format-options/demo.html b/static/usage/v7/datetime/format-options/demo.html
new file mode 100644
index 00000000000..f2e2bdfdce9
--- /dev/null
+++ b/static/usage/v7/datetime/format-options/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Datetime</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-datetime value="2023-11-02T01:22:00">
+            <span slot="title">Select Date</span>
+          </ion-datetime>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const datetime = document.querySelector('ion-datetime');
+      datetime.formatOptions = {
+        time: { hour: '2-digit', minute: '2-digit' },
+        date: { day: '2-digit', month: 'long' },
+      };
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/datetime/format-options/index.md b/static/usage/v7/datetime/format-options/index.md
new file mode 100644
index 00000000000..ddcc7130af9
--- /dev/null
+++ b/static/usage/v7/datetime/format-options/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/datetime/format-options/demo.html"
+/>
diff --git a/static/usage/v7/datetime/format-options/javascript.md b/static/usage/v7/datetime/format-options/javascript.md
new file mode 100644
index 00000000000..8476e5fe8a8
--- /dev/null
+++ b/static/usage/v7/datetime/format-options/javascript.md
@@ -0,0 +1,13 @@
+```html
+<ion-datetime value="2023-11-02T01:22:00">
+  <span slot="title">Select Date</span>
+</ion-datetime>
+
+<script>
+  const datetime = document.querySelector('ion-datetime');
+  datetime.formatOptions = {
+    time: { hour: '2-digit', minute: '2-digit' },
+    date: { day: '2-digit', month: 'long' },
+  };
+</script>
+```
diff --git a/static/usage/v7/datetime/format-options/react.md b/static/usage/v7/datetime/format-options/react.md
new file mode 100644
index 00000000000..5c5bcfb2882
--- /dev/null
+++ b/static/usage/v7/datetime/format-options/react.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonDatetime
+      value="2023-11-02T01:22:00"
+      formatOptions={{
+        time: { hour: '2-digit', minute: '2-digit' },
+        date: { day: '2-digit', month: 'long' },
+      }}
+    >
+      <span slot="title">Select Date</span>
+    </IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/format-options/vue.md b/static/usage/v7/datetime/format-options/vue.md
new file mode 100644
index 00000000000..e24444436fc
--- /dev/null
+++ b/static/usage/v7/datetime/format-options/vue.md
@@ -0,0 +1,17 @@
+```html
+<template>
+  <ion-datetime value="2023-11-02T01:22:00" :format-options="formatOptions">
+    <span slot="title">Select Date</span>
+  </ion-datetime>
+</template>
+
+<script lang="ts" setup>
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  const formatOptions = {
+    time: { hour: '2-digit', minute: '2-digit' },
+    date: { day: '2-digit', month: 'long' },
+  };
+</script>
+```

From 9ab2baaa9fd436573100fba575a22429bb15e281 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Wed, 14 Feb 2024 16:49:58 -0500
Subject: [PATCH 2/5] misc improvements

---
 docs/api/datetime.md                          | 24 +++++++++----------
 .../v7/datetime/format-options/demo.html      |  5 ++++
 .../usage/v7/datetime/format-options/index.md |  1 +
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 46b58154769..281ac89eb5e 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -14,6 +14,8 @@ import MaxMin from '@site/static/usage/v7/datetime/date-constraints/max-min/inde
 import Values from '@site/static/usage/v7/datetime/date-constraints/values/index.md';
 import Advanced from '@site/static/usage/v7/datetime/date-constraints/advanced/index.md';
 
+import FormatOptions from '@site/static/usage/v7/datetime/format-options/index.md';
+
 import CustomLocale from '@site/static/usage/v7/datetime/localization/custom-locale/index.md';
 import HourCycle from '@site/static/usage/v7/datetime/localization/hour-cycle/index.md';
 import FirstDayOfWeek from '@site/static/usage/v7/datetime/localization/first-day-of-week/index.md';
@@ -246,18 +248,6 @@ import Wheel from '@site/static/usage/v7/datetime/presentation/wheel/index.md';
 
 <Wheel />
 
-## Format Options
-
-You can customize the format of the date in the header text and the time in the time button of a Datetime component by providing `formatOptions`. The `date` and `time` in the `formatObjects` property should each be an [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) object. If `formatObjects` is not provided, default formats will be used for dates and times.
-
-If `timeZone` or `timeZoneName` are provided, they will be ignored, and the time zone will be set to UTC. This ensures that the displayed value matches the selected value, rather than being converted to the user's current time zone.
-
-Be careful with the options you provide, as they may not match the selected presentation. For example, providing `minute: 'numeric'` for a presentation of `month` may lead to unexpected behavior, displaying a month where only a time might be expected.
-
-import FormatOptions from '@site/static/usage/v7/datetime/format-options/index.md';
-
-<FormatOptions />
-
 ## Multiple Date Selection
 
 If the `multiple` property is set to `true`, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it.
@@ -280,6 +270,16 @@ By default, `ion-datetime` does not show any header or title associated with the
 
 <CustomizingTitle />
 
+## Format Options
+
+You can customize the format of the date in the header text and the time in the time button of a Datetime component by providing `formatOptions`. The `date` and `time` in the `formatObjects` property should each be an [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) object. If `formatObjects` is not provided, default formats will be used for dates and times.
+
+If `timeZone` or `timeZoneName` are provided, they will be ignored, and the time zone will be set to UTC. This ensures that the displayed value matches the selected value, rather than being converted to the user's current time zone.
+
+Be careful with the options you provide, as they may not match the selected presentation. For example, providing `minute: 'numeric'` for a presentation of `month` may lead to unexpected behavior, displaying a month where only a time might be expected.
+
+<FormatOptions />
+
 ## Buttons
 
 By default, `ionChange` is emitted with the new datetime value whenever a new date is selected. To require user confirmation before emitting `ionChange`, you can either set the `showDefaultButtons` property to `true` or use the `buttons` slot to pass in a custom confirmation button. When passing in custom buttons, the confirm button must call the `confirm` method on `ion-datetime` for `ionChange` to be emitted.
diff --git a/static/usage/v7/datetime/format-options/demo.html b/static/usage/v7/datetime/format-options/demo.html
index f2e2bdfdce9..0bd6dd7f8ba 100644
--- a/static/usage/v7/datetime/format-options/demo.html
+++ b/static/usage/v7/datetime/format-options/demo.html
@@ -8,6 +8,11 @@
     <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v7/datetime/format-options/index.md b/static/usage/v7/datetime/format-options/index.md
index ddcc7130af9..f12a9dc3bd2 100644
--- a/static/usage/v7/datetime/format-options/index.md
+++ b/static/usage/v7/datetime/format-options/index.md
@@ -7,6 +7,7 @@ import angular from './angular.md';
 
 <Playground
   version="7"
+  size="large"
   code={{
     javascript,
     react,

From 0d406702d7f76f397f8b58d185b3e6c04bd5cf70 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 15 Feb 2024 15:17:08 -0500
Subject: [PATCH 3/5] Apply suggestions from code review

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 docs/api/datetime-button.md                                  | 2 +-
 docs/api/datetime.md                                         | 2 +-
 static/usage/v7/datetime-button/format-options/javascript.md | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md
index c04d50eb564..c26d2ca5055 100644
--- a/docs/api/datetime-button.md
+++ b/docs/api/datetime-button.md
@@ -37,7 +37,7 @@ The localized text on `ion-datetime-button` is determined by the `locale` proper
 
 ## Format Options
 
-You can customize the format of the date and time in a Datetime Button by providing `formatOptions`. See [Datetime Format Options](./datetime#format-options) for more details.
+You can customize the format of the date and time in a Datetime Button by providing `formatOptions` on the associated Datetime instance. See [Datetime Format Options](./datetime#format-options) for more details.
 
 import FormatOptions from '@site/static/usage/v7/datetime-button/format-options/index.md';
 
diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 281ac89eb5e..8bfcee891df 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -272,7 +272,7 @@ By default, `ion-datetime` does not show any header or title associated with the
 
 ## Format Options
 
-You can customize the format of the date in the header text and the time in the time button of a Datetime component by providing `formatOptions`. The `date` and `time` in the `formatObjects` property should each be an [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) object. If `formatObjects` is not provided, default formats will be used for dates and times.
+You can customize the format of the date in the header text and the time in the time button of a Datetime component by providing `formatOptions`. The `date` and `time` in the `formatOptions` property should each be an [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) object. If `formatOptions` is not provided, default formats will be used for dates and times.
 
 If `timeZone` or `timeZoneName` are provided, they will be ignored, and the time zone will be set to UTC. This ensures that the displayed value matches the selected value, rather than being converted to the user's current time zone.
 
diff --git a/static/usage/v7/datetime-button/format-options/javascript.md b/static/usage/v7/datetime-button/format-options/javascript.md
index 67eb934994c..a71c653a98b 100644
--- a/static/usage/v7/datetime-button/format-options/javascript.md
+++ b/static/usage/v7/datetime-button/format-options/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-datetime-button datetime="datetime"></ion-datetime-button>
 
-<ion-modal keep-contents-mounted="{true}">
+<ion-modal keep-contents-mounted="true">
   <ion-datetime id="datetime" presentation="date-time" value="2023-11-02T01:22:00"></ion-datetime>
 </ion-modal>
 

From 345863239665e2cf5931fbd8f068bc062b3448dd Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 15 Feb 2024 15:22:53 -0500
Subject: [PATCH 4/5] add link to time zone docs

---
 docs/api/datetime.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 281ac89eb5e..8c1b0d5dbf1 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -274,7 +274,7 @@ By default, `ion-datetime` does not show any header or title associated with the
 
 You can customize the format of the date in the header text and the time in the time button of a Datetime component by providing `formatOptions`. The `date` and `time` in the `formatObjects` property should each be an [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) object. If `formatObjects` is not provided, default formats will be used for dates and times.
 
-If `timeZone` or `timeZoneName` are provided, they will be ignored, and the time zone will be set to UTC. This ensures that the displayed value matches the selected value, rather than being converted to the user's current time zone.
+Datetime [does not manipulate or set](#time-zones) the time zone. If `timeZone` or `timeZoneName` are provided, they will be ignored, and the time zone will be set to UTC. This ensures that the displayed value matches the selected value, rather than being converted to the user's current time zone.
 
 Be careful with the options you provide, as they may not match the selected presentation. For example, providing `minute: 'numeric'` for a presentation of `month` may lead to unexpected behavior, displaying a month where only a time might be expected.
 

From 100cec6a3f5d13d0707bd44d534ad63f1c2a8691 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 15 Feb 2024 15:33:45 -0500
Subject: [PATCH 5/5] enlarge playground

---
 static/usage/v7/datetime-button/format-options/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/static/usage/v7/datetime-button/format-options/index.md b/static/usage/v7/datetime-button/format-options/index.md
index 3dac7f2bf05..482629caa38 100644
--- a/static/usage/v7/datetime-button/format-options/index.md
+++ b/static/usage/v7/datetime-button/format-options/index.md
@@ -7,6 +7,7 @@ import angular from './angular.md';
 
 <Playground
   version="7"
+  size="large"
   code={{
     javascript,
     react,