bug: datetime header shows 0 days selected with no value even if multiple="false"

[olaisen81]

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

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

Current Behavior

DateTime showing 0 Days when initialized with formcontrol and string empty value, with Ionic version 6.2.9 all works fine.
Version 6.3.0 introduce some buggy behavior for DateTime, fixed partially with 6.3.1

Expected Behavior

DateTime show current date if initialized with string empty value in FormControl as version 6.2.9

Steps to Reproduce

Add dateTime control and init with formcontrol and empty value

Code Reproduction URL

https://github.com/olaisen81/ionic-datetime-issue_6.3.1

Ionic Info

Ionic:

Ionic CLI : 6.17.1 (C:\Users\fabio.perfetti\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.3.1
@angular-devkit/build-angular : 14.2.5
@angular-devkit/schematics : 14.2.5
@angular/cli : 14.2.5
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.8.0
@capacitor/android : 3.8.0
@capacitor/core : 3.8.0
@capacitor/ios : 3.8.0

Utility:

cordova-res : 0.15.1
native-run : 1.7.1

System:

NodeJS : v14.18.0 (C:\Program Files\nodejs\node.exe)
npm : 6.14.15
OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the report. I can reproduce this. Here is a dev build if you are interested in testing the proposed fix:

npm install @ionic/angular@6.3.2-dev.11665667373.1a3ecede

[liamdebeasi]

This has been resolved via #26120, and a fix will be available in an upcoming release of Ionic Framework. Feel free to continue testing this dev build, and let me know if you run into any issues.

[olaisen81]

Thanks for the report. I can reproduce this. Here is a dev build if you are interested in testing the proposed fix:

npm install @ionic/angular@6.3.2-dev.11665667373.1a3ecede

Hi Liam, after the fix header showing current date correctly ('Thu 13 Oct' in locale it) but the button for selecting months and years showing May 2021 instead of October 2022.

[liamdebeasi]

This is unrelated to the dev build, but still something we can fix. I'll dig into this a bit more.

[liamdebeasi]

Here is a dev build that should fix the header issue:

npm install @ionic/angular@6.3.2-dev.11665761572.1e49d325

The problem here is your FormControl for the datetime is initialized to the empty string. Datetime was trying to parse that as an ISO 8601 date, but it was not valid.

Typically the solution here would be to initialize the FormControl to undefined, but there is some old code in Ionic Angular that converts undefined or null values to the empty string:

ionic-framework/angular/src/directives/control-value-accessors/value-accessor.ts

Line 28 in d76a24d

this.el.nativeElement.value = this.lastValue = value == null ? '' : value;

As a result, I changed datetime to treat the empty string like it does not have a value at all. Note that this is temporary and will change in Ionic 7 when we remove the old Ionic Angular conversion code. As a result, you may want to update your implementation now to use undefined instead of the empty string.

[liamdebeasi]

I merged #26131 which as a fix for the empty string bug. This fix should be available in an upcoming release of Ionic.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.