bug: passing max only causes ion-datetime is out of bounds

[RRGT19]

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

I have a field to select the date of birth. The rule is to start showing dates 10 years before today. In the meanwhile, the field should be empty until you select a date.

When setting the max to 2012-08-26T12:47:01.977Z or to 2012, I receive this warning:

The value provided to ion-datetime is out of bounds.

Min: undefined
Max: {"month":8,"day":26,"year":2012,"hour":12,"minute":47}
Value: {"year":2022,"month":8,"day":26,"hour":8,"minute":56,"tzOffset":0}

I understand the warning and I see that the Value (2022) is greater than the Max (2012). It seems that the component is picking up the today Date automatically.

Trying to set the field's value with the same max date that I have provided, the warning disappears.

This can be confusing because the reality is that the user did not select a date yet. Also, when the user see that date, he can think that was automatically pulled from its account settings, which is false.

Expected Behavior

• The component should not take today date automatically.
• If no Value exists, should render the dates taken into account min/max settings.

Steps to Reproduce

<ion-modal trigger="open-modal">
  <ng-template>
    <ion-content>
      <ion-datetime
        #datetime
        size="cover"
        [(ngModel)]="value"
        max="2012-08-26T12:47:01.977Z"
        [preferWheel]="true"
      ></ion-datetime>
    </ion-content>
  </ng-template>
</ion-modal>

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 6.20.1
   Ionic Framework               : @ionic/angular 6.2.4
   @angular-devkit/build-angular : 14.1.1
   @angular-devkit/schematics    : 14.1.1
   @angular/cli                  : 14.1.1
   @ionic/angular-toolkit        : 7.0.0

Capacitor:

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

Utility:

   cordova-res : 0.15.4
   native-run  : 1.6.0

System:

   NodeJS : v16.16.0
   npm    : 8.18.0
   OS     : macOS Monterey

Additional Information

Maybe this behavior was intended and decided for some reason, but if this is the case, how can I accomplish a simple UX like the one I have described before?

My goal is to let the user select a date in the past while keeping the field/component with no initial value.

[liamdebeasi]

Thanks for the issue. I can confirm this is a bug. I have a dev build below with a proposed fix if you are interested in testing it:

npm install @ionic/[email protected]

[RRGT19]

@liamdebeasi Thanks for your quick response.

Using that dev build I still receive the warning.

Example 1:

<ion-modal trigger="open-modal">
  <ng-template>
    <ion-content>
      <ion-datetime
        #datetime
        size="cover"
        [(ngModel)]="value"
        max="2012-08-26T12:47:01.977Z" // <============
        [preferWheel]="true"
      ></ion-datetime>
    </ion-content>
  </ng-template>
</ion-modal>

Console log:

The value provided to ion-datetime is out of bounds.

Min: undefined
Max: {"month":8,"day":26,"year":2012,"hour":12,"minute":47}
Value: {"year":2022,"month":8,"day":26,"hour":11,"minute":41,"tzOffset":0}

Example 2:

<ion-modal trigger="open-modal">
  <ng-template>
    <ion-content>
      <ion-datetime
        #datetime
        size="cover"
        [(ngModel)]="value"
        max="2012" // <============
        [preferWheel]="true"
      ></ion-datetime>
    </ion-content>
  </ng-template>
</ion-modal>

I pass only the year 2012 because according to the docs, this is valid:
https://ionicframework.com/docs/api/datetime#max

Console log:

The value provided to ion-datetime is out of bounds.

Min: undefined
Max: {"year":2012}
Value: {"year":2022,"month":8,"day":26,"hour":11,"minute":42,"tzOffset":0}

--

RangeError: Maximum call stack size exceeded
    at getAllMonthsInRange (parse-26477881.js:963:3)
    at getAllMonthsInRange (parse-26477881.js:963:28)
    at getAllMonthsInRange (parse-26477881.js:963:28)
    at getAllMonthsInRange (parse-26477881.js:963:28)
    at getAllMonthsInRange (parse-26477881.js:963:28)
    at getAllMonthsInRange (parse-26477881.js:963:28)
    at getAllMonthsInRange (parse-26477881.js:963:28)
    at getAllMonthsInRange (parse-26477881.js:963:28)
    at getAllMonthsInRange (parse-26477881.js:963:28)
    at getAllMonthsInRange (parse-26477881.js:963:28) 

Let me know if you want me to test any other case.

[liamdebeasi]

I see you are using ngModel with datetime. What are you passing in the value variable?

The intent of this message is to warn developers when they are passing a value that is out of bounds with the constraints that they have setup using the max and min properties.

[liamdebeasi]

I did miss when value is null which may be the case in your application. Here is a new dev build:

npm install @ionic/[email protected]

If value is either null or undefined, then this warning should not be logged.

[RRGT19]

I have tested the new dev build.

My ion-datetime is connected to a FormControl and the initial value is null. I added ngModel in my example to avoid showing a lot of boilerplate code.

My goal is to have a field to ask: Select your date of birth

control = new FormControl(null, Validators.required);

And for the max setting:

max: string = '2012-08-26T12:47:01.977Z'; // or just '2012'

Questions:

• Using 2012-08-26T12:47:01.977Z as the max, I do receive the warning in console, it doesn't matter?
• Using 2012 as the max, I do receive the warning but also a RangeError: Invalid time value error.
• If an initial value is needed to avoid errors and warnings, for my goal to ask the date of birth, what would be the initial value? The goal is to keep the field empty with no value until the user select a date.

[liamdebeasi]

Do you have a GitHub repo I can use to test this behavior? It is hard to tell what is going on in your app since I cannot run it locally.

[RRGT19]

Here is a demo repo with my scenario:
https://github.com/RRGT19/ionic-test-datetime-with-no-initial-value

[liamdebeasi]

Thanks! The issue is that I did not account for the empty string ''. Here is a new dev build: 6.2.5-dev.11661531954.1e6f7ed8.

Using this dev build you should be able to avoid setting a default value prop for your use case.

[RRGT19]

Got it.

Now, using 2012-08-26T12:47:01.977Z, works perfectly. :)

One thing to mention is that if I use just 2012, causes a RangeError: Invalid time value at getDayColumnData.

According to docs here:
The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as 1994. Defaults to the end of this year.

Passing just the year is not supposed to be valid? I would like to know the correct format to use on my scenario.

[liamdebeasi]

Good catch. Yes, you should be able to pass in any valid ISO 8601 string. We mistakenly do not fill in missing date information when parsing min and max. So if you pass in max="2012", the month, day, hour, and minute data is not filled in.

This is a different bug, so I opened #25836. However, I have a dev build that has both fixes: 6.2.5-dev.11661540078.1d2af6ea

[RRGT19]

Thanks for your response.

I confirm with that dev build that now is working as intended, no matter the datetime format you use.

Thanks a lot!.

[liamdebeasi]

Thanks for the issue. This has been resolved via #25835, and a fix will be available in an upcoming release of Ionic Framework.

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