ionic-team · liamdebeasi · Aug 1, 2022 · Jul 19, 2022 · Jul 19, 2022 · Jul 19, 2022
@@ -0,0 +1,76 @@
+---
+title: "ion-datetime-button"
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+import Props from '@site/static/auto-generated/datetime-button/props.md';
+import Events from '@site/static/auto-generated/datetime-button/events.md';
+import Methods from '@site/static/auto-generated/datetime-button/methods.md';
+import Parts from '@site/static/auto-generated/datetime-button/parts.md';
+import CustomProps from '@site/static/auto-generated/datetime-button/custom-props.md';
+import Slots from '@site/static/auto-generated/datetime-button/slots.md';
+
+<head>
+  <title>ion-datetime-button: Ionic API Input for interacting with Datetime picker</title>
+  <meta name="description" content="Datetime button links with a datetime instance to easily a datetime in a popover, modal, and more." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+import APITOCInline from '@components/page/api/APITOCInline';
+
+<EncapsulationPill type="shadow" />
+
+Datetime Button links with a [Datetime](./datetime) component to display the formatted date and time. It also provides buttons to present the datetime in a modal, popover, and more.
+
+## Overview
+
+Datetime Button should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay.
+
+When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the [keepContentsMounted property on ion-modal](./modal#keepcontentsmounted) or the [keepContentsMounted property on ion-popover](./popover#keepcontentsmounted). This allows the linked datetime instance to be mounted even if the overlay has not been presented yet.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/datetime-button/basic/index.md';
+
+<Basic />
+
+## Localization
+
+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.
+
+## 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.
+
+<!--
+## Customization
+
+TODO
+
+### Buttons
+
+TODO
+
+### Theming
+
+TODO
+-->
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
@@ -94,6 +94,10 @@ While seconds and milliseconds can be specified using the ISO 8601 datetime form
 
 <Basic />
 
+## Usage with Datetime Button
+
+If you need to present a datetime in an overlay such as a modal or a popover, we recommend using [ion-datetime-button](./datetime-button). `ion-datetime-button` should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay.
+
 ## Date Constraints
 
 ### Max and Min Dates

@@ -287,7 +287,7 @@ module.exports = {
       type: 'category',
       label: 'Date & Time Pickers',
       collapsed: false,
-      items: ['api/datetime', 'api/picker'],
+      items: ['api/datetime', 'api/datetime-button', 'api/picker'],
     },
     {
       type: 'category',

@@ -0,0 +1,9 @@
+```html
+<ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+<ion-modal [keepContentsMounted]="true">
+  <ng-template>
+    <ion-datetime id="datetime"></ion-datetime>
+  </ng-template>
+</ion-modal>
+```
@@ -0,0 +1,30 @@
+<!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/[email protected]/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/css/ionic.bundle.css" />
+    <style>
+      ion-modal {
+        --border-radius: 8px;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+          <ion-modal>
+            <ion-datetime id="datetime"></ion-datetime>
+          </ion-modal>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
@@ -0,0 +1,8 @@
+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 size="medium" code={{ javascript, react, vue, angular }} src="usage/datetime-button/basic/demo.html" />
@@ -0,0 +1,7 @@
+```html
+<ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+<ion-modal>
+  <ion-datetime id="datetime"></ion-datetime>
+</ion-modal>
+```
@@ -0,0 +1,14 @@
+```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"></IonDatetime>
+    </IonModal>
+  );
+}
+export default Example;
+```
@@ -0,0 +1,18 @@
+```html
+<template>
+  <ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+  <ion-modal :keep-contents-mounted="true">
+    <ion-datetime id="datetime"></ion-datetime>
+  </ion-modal>
+</template>
+
+<script lang="ts">
+  import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime, IonDatetimeButton, IonModal },
+  });
+</script>
+```