Skip to content

bug: datetime picker in ion-modal crashes on selecting 12 AM  #25714

Closed
@sagun-gautam

Description

@sagun-gautam

Prerequisites

Ionic Framework Version

  • v4.x
  • v5.x
  • v6.x
  • Nightly

Current Behavior

On selecting 12 AM on time picker, current page freezes and crashes.

Expected Behavior

Date picker should close the modal.

Steps to Reproduce

Here is the code in component

    <ion-input id="user_time" [value]="inputValue" readonly="true" [placeholder]="'Select Time'"></ion-input>
    <ion-modal trigger="user_time" size="cover" alignment="center">
      <ng-template>
        <ion-content>
          <ion-datetime #notificationtime presentation="time" [value]="pickerValue" minuteValues="0"
            (ionChange)="timeChange(notificationtime)" [cancelText]="'Cancel'" [doneText]="'OK'" showDefaultButtons="true"
            hourCycle="h12"
          >
          </ion-datetime>
        </ion-content>
      </ng-template>
    </ion-modal>

To handle when value changes

  timeChange(event) {
    this.pickerValue = event.value;
    if (event && event.value) {
      let parsedTime = format(parseISO(event.value), 'HH');
      this.inputValue = parsedTime ? parsedTime : event.value;
    }
  }

Code Reproduction URL

https://stackblitz.com/edit/ionic6-angular13-w1sjhk?file=src/app/app.component.ts

Ionic Info

Ionic:

Ionic CLI : 6.18.1
Ionic Framework : @ionic/angular 6.2.0
@angular-devkit/build-angular : 12.2.16
@angular-devkit/schematics : 13.2.6
@angular/cli : 12.2.16
@ionic/angular-toolkit : 2.3.3

Cordova:

Cordova CLI : 11.0.0
Cordova Platforms : android 10.1.2, browser 6.0.0, ios 6.2.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 20 other plugins)

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

Android SDK Tools : 26.1.1
ios-deploy : 1.11.4
ios-sim : 8.0.2
NodeJS : v14.19.0 (/usr/local/bin/node)
npm : 6.14.16
OS : macOS Monterey
Xcode : Xcode 13.4.1 Build version 13F100

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions