Add examples for formatOptions

ionic-team · Feb 21, 2024 · 016b60a · 016b60a
1 parent 85a7d73
commit 016b60a
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/core/src/components/datetime-button/test/basic/index.html b/core/src/components/datetime-button/test/basic/index.html
@@ -215,8 +215,41 @@ <h2>preferWheel / date-time</h2>
               ></ion-datetime>
             </ion-popover>
           </div>
+
+          <div class="grid-item">
+            <h2>formatOptions</h2>
+
+            <ion-item>
+              <ion-label>Start Date</ion-label>
+              <ion-datetime-button datetime="format-options" slot="end"></ion-datetime-button>
+            </ion-item>
+
+            <ion-popover arrow="false">
+              <ion-datetime
+                id="format-options"
+                presentation="date-time"
+                value="2023-11-02T01:22:00"
+                locale="en-US"
+              ></ion-datetime>
+            </ion-popover>
+          </div>
         </div>
       </ion-content>
     </ion-app>
   </body>
+
+  <script>
+    const formatOptionsDatetime = document.querySelector('#format-options');
+    formatOptionsDatetime.formatOptions = {
+      date: {
+        weekday: 'short',
+        month: 'long',
+        day: '2-digit',
+      },
+      time: {
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+    };
+  </script>
 </html>
diff --git a/core/src/components/datetime/test/basic/index.html b/core/src/components/datetime/test/basic/index.html
@@ -308,6 +308,13 @@ <h2>Modal - Custom</h2>
               </ion-datetime>
             </ion-modal>
           </div>
+
+          <div class="grid-item">
+            <h2>formatOptions</h2>
+            <ion-datetime value="2020-03-14T14:23:00.000Z" id="format-options-datetime">
+              <span slot="title">Select Date</span>
+            </ion-datetime>
+          </div>
         </div>
       </ion-content>
       <script>
@@ -403,6 +410,12 @@ <h2>Modal - Custom</h2>
           app.appendChild(modalElement);
           return modalElement;
         };
+
+        const formatOptions = document.querySelector('#format-options-datetime');
+        formatOptions.formatOptions = {
+          time: { hour: '2-digit', minute: '2-digit' },
+          date: { day: '2-digit', month: 'long', era: 'short' },
+        };
       </script>
     </ion-app>
   </body>