bug: date value is not finite in DateTimeFormat format() when presentation='year' on ios device

[heodien]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

We try to show a ion-datetime with presentation="year" in ion-modal. And we got this bug on ios device. On android. it worked well.

When using ion-datetime with presentation='year'. I got error: "date value is not finite in DateTimeFormat format()"

I see it happen in getNormalizedDate funtion when we try to new Date() with refParts that have some undefined propertise

On chrome browser, it work well:

Result: we dont see the year number.

Expected Behavior

No more error

Steps to Reproduce

• Implement ion-datetime with presentation='year'
• value = 2023;
  <ion-datetime presentation="year" size="cover" width="100%" [min]="2019" [max]="2030" [(value)]="value" id="datetime"></ion-datetime>
• View it on ios device

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.1.2
@angular-devkit/build-angular : 15.2.9
@angular-devkit/schematics : 15.2.9
@angular/cli : 15.2.9
@ionic/angular-toolkit : 9.0.0

Cordova:

Cordova CLI : 12.0.0 (cordova-lib@12.0.1)
Cordova Platforms : android 12.0.0, ios 6.3.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 33 other plugins)

Utility:

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

System:

ios-sim : 8.0.2
NodeJS : v18.16.0 (/usr/local/bin/node)
npm : 9.5.1
OS : macOS Unknown
Xcode : Xcode 14.3 Build version 14E222b

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[liamdebeasi]

Can you also provide what version of iOS you are testing this on? I tested this on iOS 16.5 and 17.0, but was unable to reproduce the issue.

[heodien]

HI @liamdebeasi ,
The bug is avalaible on:

• Iphone x ios 16.2 (20C65)
• Iphone 12 ios 16.5 (20F66)
• Iphone 12promax 16.2 (20C65)

This is how we implement it:
<ion-datetime-button datetime="datetime"></ion-datetime-button> <ion-modal [keepContentsMounted]="true" (didDismiss)="dissMissModal($event)"> <ng-template> <ion-datetime presentation="year" size="cover" width="100%" [min]="minYear" [max]="maxYear" [(value)]="value" id="datetime"></ion-datetime> </ng-template>

On browser or android. The ion-datetime-button tag show excactly the date value. But on ios, it show the error.

[liamdebeasi]

Can you provide a full reproduction as GitHub repo? I don't know what values you are assigning for min, max, and value, since you are using Angular bindings.

[heodien]

Hi Liamdebeasi,
This is the repo, you need to replace the app id by your own:
https://github.com/heodien/sample-date-time-button
The ion-datetime-button dont show the year value on ios device. On browser, it's worked well.
On browser:

On device:

[heodien]

Currently we send year number to the value of ion-datetime. The issue can be fixed by replace year number by date string. But in the past, it's worked with year number.
The bug can be reproduced on safari browser.