bug: "Failed to parse date" on iOS when providing min and max values

[jadurani]

Describe the bug When I provide values for the min and max values, the date and time picker does not show up on iOS. The same typescript code works perfectly well on Android.

To Reproduce Steps to reproduce the behavior:

1. On iOS, tap the "Select Date and Time" button

2. The following "Failed to parse date" error shows up

Expected behavior

The date picker should open instead, honoring the min and max dates provided upon instantiation.

Smartphone (please complete the following information):

• Device: iPhone X
• OS: iOS 14.4.2

Additional context

  // Note that minDate is shown in the template itself
  get minDate(): string {
    return DateTime.now().plus({ hours: 2 }).toFormat("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
  }

  get maxDate(): string {
    return DateTime.now().plus({ days: 6 }).toFormat("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
  }

  ...

  async showPicker() {
    const DatePicker: DatePickerPluginInterface = Plugins.DatePickerPlugin as any;
    const options = {
      min: this.minDate,
      max: this.maxDate,
    };
    DatePicker.present(options).then(
      (date) => (this.currentArrivalDateTime = date.value),
      (err) => alert(err)
    );
  }

{{ minDate }}

<h5 class="px-3 pt-3 header-text">Preferred Arrival Time</h5>
<ion-item lines="none" (click)="changeArrivalTime()">
  <div tabindex="0"></div>
  <ion-icon
    size="small"
    class="ml-2"
    name="time-outline"
    slot="start"
  ></ion-icon>
  <small class="DeliveryDetail__text py-3 w-100">
    <ng-container *ngIf="currentArrivalDateTime; else arrivalTimeLabel">
      {{ currentArrivalDateTime | date: "EEE - MMM d (h:mm a)" }}
    </ng-container>
  </small>
  <small slot="end" class="font-weight-bold"> Change </small>
</ion-item>

<ng-template #arrivalTimeLabel> Select Time and Date </ng-template>

The same exact code works on Android. See screenshots below.

[jadurani]

From https://github.com/capacitor-community/date-picker/commit/5fc464914e79f095fee15b423a21949cc3f983a5 :

[steve-allam]

I had the same issue today,- picker not showing on IOS, but working on Android.

Turned out, I was passing in min/max as ISOString(), but the code expects the max/min dates to be in the same format as the picker.

So I fixed my issue by:

var opts:DatePickerOptions = { date: localdt, mode: mode, timezone:tz, format:"yyyy-MM-dd'T'HH:mm", theme: selectedTheme, is24h: is24 };

//opts['max'] = moment(evdt).toISOString(); changed to: opts['max'] = moment(evdt).format("YYYY-MM-DDTHH:mm");

and then it worked ok. So Android was perhaps being less picky when an ISO date string was passed into the parse routine, that didn't match the format set.

Also, I thought that the default format should have ss.SSS (ss being seconds and SSS being microsecs)