fix(datetime): allow disabling datetime with prefer-wheel

core/src/components.d.ts

@@ -2043,6 +2043,10 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the picker.
+         */
+        "disabled": boolean;
         /**
           * A list of options to be displayed in the picker
          */
@@ -6683,6 +6687,10 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the picker.
+         */
+        "disabled"?: boolean;
         /**
           * A list of options to be displayed in the picker
          */

core/src/components/datetime/datetime.tsx

@@ -1525,7 +1525,7 @@ export class Datetime implements ComponentInterface {
   }
 
   private renderCombinedDatePickerColumn() {
-    const { defaultParts, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
+    const { defaultParts, disabled, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
 
     const activePart = this.getActivePartsWithFallback();
 
@@ -1604,6 +1604,7 @@ export class Datetime implements ComponentInterface {
       <ion-picker-column-internal
         class="date-column"
         color={this.color}
+        disabled={disabled}
         items={items}
         value={todayString}
         onIonChange={(ev: CustomEvent) => {
@@ -1715,14 +1716,15 @@ export class Datetime implements ComponentInterface {
       return [];
     }
 
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
 
     const activePart = this.getActivePartsWithFallback();
 
     return (
       <ion-picker-column-internal
         class="day-column"
         color={this.color}
+        disabled={disabled}
         items={days}
         value={(workingParts.day !== null ? workingParts.day : this.defaultParts.day) ?? undefined}
         onIonChange={(ev: CustomEvent) => {
@@ -1759,14 +1761,15 @@ export class Datetime implements ComponentInterface {
       return [];
     }
 
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
 
     const activePart = this.getActivePartsWithFallback();
 
     return (
       <ion-picker-column-internal
         class="month-column"
         color={this.color}
+        disabled={disabled}
         items={months}
         value={workingParts.month}
         onIonChange={(ev: CustomEvent) => {
@@ -1802,14 +1805,15 @@ export class Datetime implements ComponentInterface {
       return [];
     }
 
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
 
     const activePart = this.getActivePartsWithFallback();
 
     return (
       <ion-picker-column-internal
         class="year-column"
         color={this.color}
+        disabled={disabled}
         items={years}
         value={workingParts.year}
         onIonChange={(ev: CustomEvent) => {
@@ -1875,14 +1879,15 @@ export class Datetime implements ComponentInterface {
   }
 
   private renderHourPickerColumn(hoursData: PickerColumnItem[]) {
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
     if (hoursData.length === 0) return [];
 
     const activePart = this.getActivePartsWithFallback();
 
     return (
       <ion-picker-column-internal
         color={this.color}
+        disabled={disabled}
         value={activePart.hour}
         items={hoursData}
         numericInput
@@ -1903,14 +1908,15 @@ export class Datetime implements ComponentInterface {
     );
   }
   private renderMinutePickerColumn(minutesData: PickerColumnItem[]) {
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
     if (minutesData.length === 0) return [];
 
     const activePart = this.getActivePartsWithFallback();
 
     return (
       <ion-picker-column-internal
         color={this.color}
+        disabled={disabled}
         value={activePart.minute}
         items={minutesData}
         numericInput
@@ -1931,7 +1937,7 @@ export class Datetime implements ComponentInterface {
     );
   }
   private renderDayPeriodPickerColumn(dayPeriodData: PickerColumnItem[]) {
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
     if (dayPeriodData.length === 0) {
       return [];
     }
@@ -1943,6 +1949,7 @@ export class Datetime implements ComponentInterface {
       <ion-picker-column-internal
         style={isDayPeriodRTL ? { order: '-1' } : {}}
         color={this.color}
+        disabled={disabled}
         value={activePart.ampm}
         items={dayPeriodData}
         onIonChange={(ev: CustomEvent) => {

core/src/components/datetime/test/disabled/datetime.spec.tsx

@@ -0,0 +1,39 @@
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Datetime } from '../../../datetime/datetime';
+import { PickerColumnInternal } from '../../../picker-column-internal/picker-column-internal';
+import { PickerInternal } from '../../../picker-internal/picker-internal';
+
+describe('ion-datetime disabled', () => {
+  beforeEach(() => {
+    // IntersectionObserver isn't available in test environment
+    const mockIntersectionObserver = jest.fn();
+    mockIntersectionObserver.mockReturnValue({
+      observe: () => null,
+      unobserve: () => null,
+      disconnect: () => null,
+    });
+    global.IntersectionObserver = mockIntersectionObserver;
+  });
+
+  it('picker should be disabled in prefer wheel mode', async () => {
+    const page = await newSpecPage({
+      components: [Datetime, PickerColumnInternal, PickerInternal],
+      template: () => (
+        <ion-datetime id="inline-datetime-wheel" disabled prefer-wheel value="2022-04-21T00:00:00"></ion-datetime>
+      ),
+    });
+
+    await page.waitForChanges();
+
+    const datetime = page.body.querySelector('ion-datetime')!;
+    const columns = datetime.shadowRoot!.querySelectorAll('ion-picker-column-internal');
+
+    await expect(columns.length).toEqual(4);
+
+    columns.forEach((column) => {
+      expect(column.disabled).toBe(true);
+    });
+  });
+});

core/src/components/datetime/test/disabled/index.html

@@ -66,6 +66,11 @@ <h2>Inline</h2>
             <h2>Inline - No Default Value</h2>
             <ion-datetime id="inline-datetime-no-value" disabled></ion-datetime>
           </div>
+
+          <div class="grid-item">
+            <h2>Inline - Prefer Wheel</h2>
+            <ion-datetime id="inline-datetime-wheel" disabled prefer-wheel value="2022-04-21T00:00:00"></ion-datetime>
+          </div>
         </div>
       </ion-content>
       <script>

core/src/components/picker-column-internal/picker-column-internal.scss

@@ -71,13 +71,20 @@
 }
 
 :host .picker-item-empty,
-:host .picker-item.picker-item-disabled {
+:host .picker-item[disabled] {
+  cursor: default;
+}
+
+:host .picker-item-empty,
+:host(:not([disabled])) .picker-item[disabled] {
   scroll-snap-align: none;
+}
 
-  cursor: default;
+:host([disabled]) {
+  overflow-y: hidden;
 }
 
-:host .picker-item.picker-item-disabled {
+:host .picker-item[disabled] {
   opacity: 0.4;
 }
 

core/src/components/picker-column-internal/picker-column-internal.tsx

@@ -35,6 +35,11 @@ export class PickerColumnInternal implements ComponentInterface {
 
   @Element() el!: HTMLIonPickerColumnInternalElement;
 
+  /**
+   * If `true`, the user cannot interact with the picker.
+   */
+  @Prop() disabled = false;
+
   /**
    * A list of options to be displayed in the picker
    */
@@ -408,13 +413,15 @@ export class PickerColumnInternal implements ComponentInterface {
   };
 
   get activeItem() {
-    return getElementRoot(this.el).querySelector(
-      `.picker-item[data-value="${this.value}"]:not([disabled])`
-    ) as HTMLElement | null;
+    // If the whole picker column is disabled, the current value should appear active
+    // If the current value item is specifically disabled, it should not appear active
+    const selector = `.picker-item[data-value="${this.value}"]${this.disabled ? '' : ':not([disabled])'}`;
+
+    return getElementRoot(this.el).querySelector(selector) as HTMLElement | null;
   }
 
   render() {
-    const { items, color, isActive, numericInput } = this;
+    const { items, color, disabled: pickerDisabled, isActive, numericInput } = this;
     const mode = getIonMode(this);
 
     /**
@@ -423,10 +430,12 @@ export class PickerColumnInternal implements ComponentInterface {
      * the attribute can be moved to datetime.tsx and set on every
      * instance of ion-picker-column-internal there instead.
      */
+
     return (
       <Host
         exportparts={`${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`}
-        tabindex={0}
+        disabled={pickerDisabled}
+        tabindex={pickerDisabled ? null : 0}
         class={createColorClasses(color, {
           [mode]: true,
           ['picker-column-active']: isActive,
@@ -443,6 +452,8 @@ export class PickerColumnInternal implements ComponentInterface {
           &nbsp;
         </div>
         {items.map((item, index) => {
+          const isItemDisabled = pickerDisabled || item.disabled || false;
+
           {
             /*
             Users should be able to tab
@@ -458,14 +469,13 @@ export class PickerColumnInternal implements ComponentInterface {
               tabindex="-1"
               class={{
                 'picker-item': true,
-                'picker-item-disabled': item.disabled || false,
               }}
               data-value={item.value}
               data-index={index}
               onClick={(ev: Event) => {
                 this.centerPickerItemInView(ev.target as HTMLElement, true);
               }}
-              disabled={item.disabled}
+              disabled={isItemDisabled}
               part={PICKER_ITEM_PART}
             >
               {item.text}

core/src/components/picker-column-internal/test/disabled/index.html

@@ -45,26 +45,39 @@
       <ion-content class="ion-padding">
         <div class="grid">
           <div class="grid-item">
-            <h2>Default</h2>
+            <h2>Even items disabled</h2>
             <ion-picker-internal>
-              <ion-picker-column-internal id="default"></ion-picker-column-internal>
+              <ion-picker-column-internal id="half-disabled"></ion-picker-column-internal>
+            </ion-picker-internal>
+          </div>
+          <div class="grid-item">
+            <h2>Column disabled</h2>
+            <ion-picker-internal>
+              <ion-picker-column-internal id="column-disabled" value="11" disabled></ion-picker-column-internal>
             </ion-picker-internal>
           </div>
         </div>
       </ion-content>
       <script>
-        const defaultPickerColumn = document.getElementById('default');
-
-        const items = Array(24)
+        const halfDisabledPicker = document.getElementById('half-disabled');
+        const halfDisabledItems = Array(24)
           .fill()
           .map((_, i) => ({
             text: `${i}`,
             value: i,
             disabled: i % 2 === 0,
           }));
+        halfDisabledPicker.items = halfDisabledItems;
+        halfDisabledPicker.value = 12;
 
-        defaultPickerColumn.items = items;
-        defaultPickerColumn.value = 12;
+        const fullDisabledPicker = document.getElementById('column-disabled');
+        const items = Array(24)
+          .fill()
+          .map((_, i) => ({
+            text: `${i}`,
+            value: i,
+          }));
+        fullDisabledPicker.items = items;
       </script>
     </ion-app>
   </body>