ion-datetime does not respect min, will not even allow dynamically set max

[coreykouns]

Bug Report

Ionic version: (check one with "x")
[ ] 2.x
[ ] 3.x
[x] 4.x

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.1 (/Users/coreykouns/.nvm/versions/node/v8.11.4/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.4
   @angular-devkit/schematics : 0.7.4
   @angular/cli               : 6.1.4
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1

Cordova:

   cordova (Cordova CLI) : 6.4.0
   Cordova Platforms     : browser 5.0.3, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic 2.0.3, cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.2, (and 11 other plugins)

System:

   ios-deploy : 1.9.0
   ios-sim    : 5.0.13
   NodeJS     : v8.11.4 (/Users/coreykouns/.nvm/versions/node/v8.11.4/bin/node)
   npm        : 6.4.0
   OS         : macOS High Sierra
   Xcode      : Xcode 9.4.1 Build version 9F2000

Describe the Bug
ion-datetimes allow for min to be set with a component-defined variable in the .ts, but max does not. Max must be defined explicitly in the HTML element to be respected. When a max is set to a component-defined variable, clicking on the ion-datetime results in the error:

"Unhandled Promise rejection: Cannot read property 'value' of undefined ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read property 'value' of undefined" in zone.js

Along with that though, when min has been defined, the wheels of the datetime do not allow you to scroll to any date prior to the min datetime, but once you hit that point, you are still able to click/tap on the numbers above that stopping point to effectively bypass the min.

Steps to Reproduce
Steps to reproduce the behavior:

1. Create any ion-datetime with a defined min and max
2. Set the corresponding variables to a date string in the format YYYY-MM-DD
3. Click on the ion-datetime
4. See error

Related Code

<ion-datetime displayFormat="MM/DD/YYYY" pickerFormat="MM DD YYYY" placeholder="MM/DD/YYYY" min="{{minSelectableDate}}" max="{{maxSelectableDate}}"
                  [(ngModel)]="recordForm.date"></ion-datetime>

Expected Behavior
ion-datetime should open, respecting the set min and max completely

[brandyscarney]

Thanks for the issue! Have you tried using property binding instead of string interpolation?

<ion-datetime displayFormat="MM/DD/YYYY" pickerFormat="MM DD YYYY" placeholder="MM/DD/YYYY" [min]="minSelectableDate" [max]="maxSelectableDate"

Also what is the value of maxSelectableDate? Thanks!

Possibly related to #15312

[coreykouns]

Hi there!

Yes I have tried property binding as well, to the same effect.

maxSelectableDate is currently being set to the string "2019-08-30". I have ensured it was set as such with toString(), as well as setting it to a new Date() and then using toISOString().

Let me know if I can give you any more info!

[brandyscarney]

So I am not able to reproduce this error in the conference app:

"Unhandled Promise rejection: Cannot read property 'value' of undefined ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read property 'value' of undefined" in zone.js 

Using the following code:

<ion-datetime
  displayFormat="MM/DD/YYYY"
  pickerFormat="MM DD YYYY"
  placeholder="MM/DD/YYYY"
  min="{{minSelectableDate}}"
  max="{{maxSelectableDate}}"
  [(ngModel)]="conferenceDate">
</ion-datetime>

minSelectableDate = '2017-08-30';
maxSelectableDate = '2019-08-30';

I am able to see that the min and max are not being respected properly, though. Let me know if there's anything else going on in your app that could be causing that error.

Also please make sure to update to latest if you haven't already. 🙂

https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#400-beta7-2018-08-30

[coreykouns]

I currently have my ngModel set to record.date, so perhaps there is something wonky happening when I set that variable in the component? Although, the date picker does default correctly to the date I set within the component, but I'm just spitballing here.

The record.date I'm using in the ngModel is being set in the constructor of its component, as such:

this.record.date = new Date(this.navParams.get('selectedDay')).toISOString();

I've ensured I am up to date on the most recent version and am still receiving the same result.

Thank you for your prompt responses!

[liamdebeasi]

Hi there,

Thanks for opening an issue with us. I'm not seeing this issue anymore on v4.0.1. Would you be able to try this again with the latest version of Ionic, and let me know if you are still experiencing this issue?

[coreykouns]

Hey Liam!

Looks like this has been patched up as of late. I can confirm it is working for our use case. Thanks for all the good work!

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