question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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: <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:

  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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
coreykounscommented, Feb 13, 2019

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!

1reaction
coreykounscommented, Aug 30, 2018

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

ion-datetime does not respect min, will not even allow ... - GitHub
I currently have my ngModel set to record.date, so perhaps there is something wonky happening when I set that variable in the component?...
Read more >
Ionic 2/3 - ion-datetime - setting max is changing a default ...
I have two dates - start and end, which are binded with my controller properties. In my controller I also set min and...
Read more >
Problem setting min and max for the new datetime comp
Hello, i'm trying to dynamically set the min and max values for the v6 datetime component. If i use viewchild <ion-datetime #datePicker ...
Read more >
Angular and Ionic Date & Time Min & max values Example
Configuring minimum and maximum selectable values is great for reducing mistakes. Help people by limiting the selections for the task at hand.
Read more >
Configuration - Spark 3.3.1 Documentation - Apache Spark
SparkConf allows you to configure some of the common properties (e.g. master ... If not set, Spark will not limit Python's memory use...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found