feat(datetime): add size property (#23649)

resolves #23518
2025-08-16 01:52:19 +08:00 · 2021-07-20 12:31:38 -04:00
parent 2c07a1566b
commit 321341d97d
13 changed files with 184 additions and 5 deletions
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@ -244,8 +244,8 @@ export class IonContent {
 }
 export declare interface IonDatetime extends Components.IonDatetime {
 }
-@ProxyCmp({ inputs: ["cancelText", "color", "dayValues", "disabled", "doneText", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "value", "yearValues"], "methods": ["confirm", "reset", "cancel"] })
-@Component({ selector: "ion-datetime", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["cancelText", "color", "dayValues", "disabled", "doneText", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "value", "yearValues"] })
+@ProxyCmp({ inputs: ["cancelText", "color", "dayValues", "disabled", "doneText", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "value", "yearValues"], "methods": ["confirm", "reset", "cancel"] })
+@Component({ selector: "ion-datetime", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["cancelText", "color", "dayValues", "disabled", "doneText", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "value", "yearValues"] })
 export class IonDatetime {
  ionCancel!: EventEmitter<CustomEvent>;
  ionChange!: EventEmitter<CustomEvent>;
--- a/core/api.txt
+++ b/core/api.txt
@ -387,6 +387,7 @@ ion-datetime,prop,readonly,boolean,false,false,false
 ion-datetime,prop,showDefaultButtons,boolean,false,false,false
 ion-datetime,prop,showDefaultTimeLabel,boolean,true,false,false
 ion-datetime,prop,showDefaultTitle,boolean,false,false,false
+ion-datetime,prop,size,"cover" | "fixed",'fixed',false,false
 ion-datetime,prop,value,null | string | undefined,undefined,false,false
 ion-datetime,prop,yearValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,method,cancel,cancel(closeOverlay?: boolean) => Promise<void>
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@ -784,6 +784,10 @@ export namespace Components {
          * If `true`, a header will be shown above the calendar picker. On `ios` mode this will include the slotted title, and on `md` mode this will include the slotted title and the selected date.
         */
        "showDefaultTitle": boolean;
+        /**
+          * If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width.
+         */
+        "size": 'cover' | 'fixed';
        /**
          * The value of the datetime as a valid ISO 8601 datetime string.
         */
@ -4352,6 +4356,10 @@ declare namespace LocalJSX {
          * If `true`, a header will be shown above the calendar picker. On `ios` mode this will include the slotted title, and on `md` mode this will include the slotted title and the selected date.
         */
        "showDefaultTitle"?: boolean;
+        /**
+          * If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width.
+         */
+        "size"?: 'cover' | 'fixed';
        /**
          * The value of the datetime as a valid ISO 8601 datetime string.
         */
--- a/core/src/components/datetime/datetime.scss
+++ b/core/src/components/datetime/datetime.scss
@ -14,7 +14,6 @@

  flex-flow: column;

-  width: 350px;
  height: 100%;

  background: var(--background);
@ -22,6 +21,15 @@
  overflow: hidden;
 }

+:host(.datetime-size-fixed) {
+  width: 350px;
+}
+
+:host(.datetime-size-cover) {
+  width: 100%;
+  min-width: 350px;
+}
+
 :host .calendar-body,
 :host .time-column,
 :host .datetime-year {
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@ -318,6 +318,12 @@ export class Datetime implements ComponentInterface {
   */
  @Prop() showDefaultTimeLabel = true;

+  /**
+   * If `cover`, the `ion-datetime` will expand to cover the full width of its container.
+   * If `fixed`, the `ion-datetime` will have a fixed width.
+   */
+  @Prop() size: 'cover' | 'fixed' = 'fixed';
+
  /**
   * Emitted when the datetime selection was cancelled.
   */
@ -1525,7 +1531,7 @@ export class Datetime implements ComponentInterface {
  }

  render() {
-    const { name, value, disabled, el, color, isPresented, readonly, showMonthAndYear, presentation } = this;
+    const { name, value, disabled, el, color, isPresented, readonly, showMonthAndYear, presentation, size } = this;
    const mode = getIonMode(this);

    renderHiddenInput(true, el, name, value, disabled);
@ -1540,7 +1546,8 @@ export class Datetime implements ComponentInterface {
            ['datetime-readonly']: readonly,
            ['datetime-disabled']: disabled,
            'show-month-and-year': showMonthAndYear,
-            [`datetime-presentation-${presentation}`]: true
+            [`datetime-presentation-${presentation}`]: true,
+            [`datetime-size-${size}`]: true
          })
        }}
      >
--- a/core/src/components/datetime/readme.md
+++ b/core/src/components/datetime/readme.md
@ -173,6 +173,9 @@ dates in JavaScript.
 <!-- Selecting time first, date second -->
 <ion-datetime presentation="time-date"></ion-datetime>

+<!-- Full width size -->
+<ion-datetime size="cover"></ion-datetime>
+
 <!-- Custom title -->
 <ion-datetime>
  <div slot="title">My Custom Title</div>
@ -252,6 +255,9 @@ export class MyComponent {
 <!-- Selecting time first, date second -->
 <ion-datetime presentation="time-date"></ion-datetime>

+<!-- Full width size -->
+<ion-datetime size="cover"></ion-datetime>
+
 <!-- Custom title -->
 <ion-datetime>
  <div slot="title">My Custom Title</div>
@ -342,6 +348,9 @@ export const DateTimeExamples: React.FC = () => {
      
      {/* Selecting time first, date second */}
      <IonDatetime presentation="time-date"></IonDatetime>
+
+      {/* Full width size */}
+      <IonDatetime size="cover"></IonDatetime>
      
      {/* Custom title */}
      <IonDatetime>
@ -423,6 +432,9 @@ export class DatetimeExample {
      
      {/* Selecting time first, date second */}
      <ion-datetime presentation="time-date"></ion-datetime>,
+
+      {/* Full width size */}
+      <ion-datetime size="cover"></ion-datetime>,
      
      {/* Custom title */}
      <ion-datetime>
@ -480,6 +492,9 @@ export class DatetimeExample {
  
  <!-- Selecting time first, date second -->
  <ion-datetime presentation="time-date"></ion-datetime>
+
+  <!-- Full width size -->
+  <ion-datetime size="cover"></ion-datetime>
  
  <!-- Custom title -->
  <ion-datetime>
@ -567,6 +582,7 @@ export class DatetimeExample {
 | `showDefaultButtons`   | `show-default-buttons`    | If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.                                                                                                                                                                                                 | `boolean`                                        | `false`        |
 | `showDefaultTimeLabel` | `show-default-time-label` | If `true`, the default "Time" label will be rendered for the time selector of the `ion-datetime` component. Developers can also use the `time-label` slot if they want to customize this label. If a custom label is set in the `time-label` slot then the default label will not be rendered.                                                                                                                                                                                                    | `boolean`                                        | `true`         |
 | `showDefaultTitle`     | `show-default-title`      | If `true`, a header will be shown above the calendar picker. On `ios` mode this will include the slotted title, and on `md` mode this will include the slotted title and the selected date.                                                                                                                                                                                                                                                                                                       | `boolean`                                        | `false`        |
+| `size`                 | `size`                    | If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width.                                                                                                                                                                                                                                                                                                                                                      | `"cover" \| "fixed"`                             | `'fixed'`      |
 | `value`                | `value`                   | The value of the datetime as a valid ISO 8601 datetime string.                                                                                                                                                                                                                                                                                                                                                                                                                                    | `null \| string \| undefined`                    | `undefined`    |
 | `yearValues`           | `year-values`             | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.                                                                         | `number \| number[] \| string \| undefined`      | `undefined`    |

--- a/core/src/components/datetime/test/size/index.html
+++ b/core/src/components/datetime/test/size/index.html
@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8">
+    <title>Datetime - Basic</title>
+    <meta name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      ion-popover {
+        --width: 500px;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Datetime - Basic</ion-title>
+          <ion-buttons slot="end">
+            <ion-button id="popover-trigger">Options</ion-button>
+          </ion-buttons>
+          <ion-popover class="options-popover" trigger="popover-trigger">
+            <ion-list lines="none">
+              <ion-item detail="true" href="?ionic:mode=ios">
+                <ion-label>iOS Mode</ion-label>
+              </ion-item>
+              <ion-item detail="true" href="?ionic:mode=md">
+                <ion-label>MD Mode</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-popover>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Inline - Fixed (350px)</h2>
+            <ion-datetime value="2020-03-14T14:23:00.000Z" id="inline-datetime"></ion-datetime>
+          </div>
+
+          <div class="grid-item">
+            <h2>Popover - Fixed (350px)</h2>
+            <ion-button onclick="presentPopover(defaultPopover, event)">Present Popover</ion-button>
+            <ion-popover class="datetime-popover" id="default-popover">
+              <ion-datetime></ion-datetime>
+            </ion-popover>
+          </div>
+
+          <div class="grid-item">
+            <h2>Modal - Fixed (350px)</h2>
+            <ion-button onclick="presentModal()">Present Modal</ion-button>
+          </div>
+
+          <div class="grid-item">
+            <h2>Inline - Cover (100%)</h2>
+            <ion-datetime value="2020-03-14T14:23:00.000Z" id="custom-datetime" size="cover"></ion-datetime>
+          </div>
+
+          <div class="grid-item">
+            <h2>Popover - Cover (100%)</h2>
+            <ion-button onclick="presentPopover(customPopover, event)">Present Popover</ion-button>
+            <ion-popover class="datetime-popover" id="custom-popover">
+              <ion-datetime size="cover"></ion-datetime>
+            </ion-popover>
+          </div>
+
+          <div class="grid-item">
+            <h2>Modal - Cover (100%)</h2>
+            <ion-button onclick="presentModal('cover')">Present Modal</ion-button>
+          </div>
+        </div>
+      </ion-content>
+      <script>
+        const datetimes = document.querySelectorAll('ion-datetime');
+        const datetime = document.querySelector('ion-datetime');
+  
+        const defaultPopover = document.querySelector('ion-popover#default-popover');
+        const customPopover = document.querySelector('ion-popover#custom-popover');
+        const presentPopover = (popover, ev) => {
+          popover.event = ev;
+          popover.showBackdrop = false;
+          popover.isOpen = true;
+  
+          const dismiss = () => {
+            popover.isOpen = false;
+            popover.event = undefined;
+  
+            popover.removeEventListener('didDismiss', dismiss);
+          }
+  
+          popover.addEventListener('didDismiss', dismiss);
+        }
+  
+        const presentModal = async (size = 'fixed') => {
+          const modal = await createModal(size);
+  
+          await modal.present();
+        }
+  
+        const createModal = (size) => {
+          // create component to open
+          const element = document.createElement('div');
+          element.innerHTML = `
+            <ion-datetime show-default-buttons="true" color="danger" size="${size}">
+              <span slot="title">Select Date</span>
+            </ion-datetime>
+          `;
+  
+          // present the modal
+          const modalElement = Object.assign(document.createElement('ion-modal'), {
+            component: element
+          });
+          document.body.appendChild(modalElement);
+          return modalElement;
+        }
+      </script>
+    </ion-app>
+  </body>
+</html>
--- a/core/src/components/datetime/usage/angular.md
+++ b/core/src/components/datetime/usage/angular.md
@ -26,6 +26,9 @@
 <!-- Selecting time first, date second -->
 <ion-datetime presentation="time-date"></ion-datetime>

+<!-- Full width size -->
+<ion-datetime size="cover"></ion-datetime>
+
 <!-- Custom title -->
 <ion-datetime>
  <div slot="title">My Custom Title</div>
--- a/core/src/components/datetime/usage/javascript.md
+++ b/core/src/components/datetime/usage/javascript.md
@ -26,6 +26,9 @@
 <!-- Selecting time first, date second -->
 <ion-datetime presentation="time-date"></ion-datetime>

+<!-- Full width size -->
+<ion-datetime size="cover"></ion-datetime>
+
 <!-- Custom title -->
 <ion-datetime>
  <div slot="title">My Custom Title</div>
--- a/core/src/components/datetime/usage/react.md
+++ b/core/src/components/datetime/usage/react.md
@ -52,6 +52,9 @@ export const DateTimeExamples: React.FC = () => {
      
      {/* Selecting time first, date second */}
      <IonDatetime presentation="time-date"></IonDatetime>
+
+      {/* Full width size */}
+      <IonDatetime size="cover"></IonDatetime>
      
      {/* Custom title */}
      <IonDatetime>
--- a/core/src/components/datetime/usage/stencil.md
+++ b/core/src/components/datetime/usage/stencil.md
@ -50,6 +50,9 @@ export class DatetimeExample {
      
      {/* Selecting time first, date second */}
      <ion-datetime presentation="time-date"></ion-datetime>,
+
+      {/* Full width size */}
+      <ion-datetime size="cover"></ion-datetime>,
      
      {/* Custom title */}
      <ion-datetime>
--- a/core/src/components/datetime/usage/vue.md
+++ b/core/src/components/datetime/usage/vue.md
@ -26,6 +26,9 @@
  
  <!-- Selecting time first, date second -->
  <ion-datetime presentation="time-date"></ion-datetime>
+
+  <!-- Full width size -->
+  <ion-datetime size="cover"></ion-datetime>
  
  <!-- Custom title -->
  <ion-datetime>
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@ -285,6 +285,7 @@ export const IonDatetime = /*@__PURE__*/ defineContainer<JSX.IonDatetime>('ion-d
  'showDefaultTitle',
  'showDefaultButtons',
  'showDefaultTimeLabel',
+  'size',
  'ionCancel',
  'ionChange',
  'ionFocus',