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

resolves #23518

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"] })
+@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", "value", "yearValues"] })
+@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>;

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>

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.
          */

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 {

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
           })
         }}
       >

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>
@@ -343,6 +349,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>
         <div slot="title">My Custom Title</div>
@@ -424,6 +433,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>
         <div slot="title">My Custom Title</div>
@@ -481,6 +493,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>
     <div slot="title">My Custom Title</div>
@@ -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`    |
 

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>

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>

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>

core/src/components/datetime/usage/react.md

@@ -53,6 +53,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>
         <div slot="title">My Custom Title</div>

core/src/components/datetime/usage/stencil.md

@@ -51,6 +51,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>
         <div slot="title">My Custom Title</div>

core/src/components/datetime/usage/vue.md

@@ -27,6 +27,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>

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',