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

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

[amandaejohnston]

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.

[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?