Skip to content

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

Description

@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

Metadata

Metadata

Assignees

Labels

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions