bug: Ionic 6 - Ion-Datetime UI should not be solid blue for todays date when no value set

[bkarv]

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

Current Behavior

On Ionic 6 and to be honest its a bit harsh to call it a bug. But in short when in popover mode when the user clicks on the text or input date field to open up the new ion-datetime UI. If no value is selected, the date defaults to today's date. This is fine however the circle is blue solid which visually means the user has selected the date already which is incorrect. This could cause confusion.

Expected Behavior

If no value set, the default today's date should be a blue outline circle not a solid circle. See below correct expected behaviour.

Steps to Reproduce

Test new ionic datetime using a ngModel value set to "" or null. I tested in popover mode in Angular 13:

<ion-item class="ion-text-wrap" button="true" id="ionic-date-start">
                        <ion-icon name="calendar" slot="start"></ion-icon>
                         <ion-label style="color:#424242">Start Date</ion-label>
                         <ion-text>{{record.start_date|date:'mediumDate'}}</ion-text>

                        <ion-popover trigger="ionic-date-start" show-backdrop="false">
                          <ng-template>
                            <ion-datetime
                              #popoverDatetime
                              presentation="date"
                              [showClearButton]="true"
                             [(ngModel)]="record.start_date"
                            ></ion-datetime>
                          </ng-template>
                        </ion-popover>
                      </ion-item>

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.15.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.0.1
@angular-devkit/build-angular : 13.0.2
@angular-devkit/schematics : 13.0.2
@angular/cli : 13.0.2
@ionic/angular-toolkit : 5.0.3

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (0 plugins total)

Utility:

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

System:

NodeJS : v16.13.1 (/usr/local/bin/node)
npm : 8.1.1
OS : macOS Big Sur
Xcode : Xcode 13.2.1 Build version 13C100

─────────────────────────────────────────────────

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.

In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.

Thank you!

[sean-perkins]

Hello @bkarv thank for reporting this issue.

Currently the datetime component will set the default value to today's date, which acts similar to the browser's implementation of datetime-locale.

I don't currently believe this is a bug. I believe this could be better classified as a feature to prevent setting the default date value to today. This would achieve the visual display you are expecting.

Does that feel fair?

[bkarv]

thanks for replying as mentioned previously bit harsh to call this a bug. I happy if this can be classified as a feature request cheers.

[averyjohnston]

I took another look at this, and confirmed that if no value is specified on the ion-datetime, it defaults to undefined, but the visual display still shows a blue circle on today's date. Also, manually setting the value to something falsy after the fact doesn't update the display -- for example, you could set it to tomorrow, and then null, and the display still highlights tomorrow with the solid blue circle.

I agree that this feels odd 🤔 There are a couple ways we could go about fixing this...

If no initial value is set, the datetime should either automatically initialize with a value of today, or not highlight any day and just show the outline around today.

And then if the value is manually set to something falsy, either there should be an error with no further action, the solid blue circle should go away (leaving just the outline), or the value should automatically switch to today. How we handle this will likely depend on how the first problem is handled.

Either way, I agree that the implementation should be improved here. I'll go ahead and file it as a bug so we can take a deeper look.