ion-datetime does not respect min, will not even allow dynamically set max
See original GitHub issueBug 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: <root> ; 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:
- Create any ion-datetime with a defined min and max
- Set the corresponding variables to a date string in the format YYYY-MM-DD
- Click on the ion-datetime
- 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
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (3 by maintainers)
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!
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!