ion-datetime min/max not working as expected

[jordanpurinton]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.1 (/usr/local/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.6
   @ionic/schematics-angular  : 1.0.5

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   Android SDK Tools : 26.1.1 (/home/jordan/Android/Sdk)
   NodeJS            : v8.10.0 (/usr/bin/node)
   npm               : 6.3.0
   OS                : Linux 4.15

Describe the Bug
When I try to pass in a variable for the max on ion-datetime, I'm greeted with this error message:
zone.js:665 Unhandled Promise rejection: Cannot read property 'year' of null ; Zone: <root> ; Task: null ; Value: TypeError: Cannot read property 'year' of null

This is what my ion-datetime looks like:
<ion-datetime display-format="MMMM, D, YYYY" max="today"></ion-datetime>

This is what my today variable looks like:
today = moment().format('YYYY-MM-DD');

How can I solve this and pass my variable to the ion-datetime and not run into this issue?

[marocas]

I got this workaround:

exports class {
  date;
  maxDate;
  constructor(  ) {
    this.date = new Date();
    this.maxDate = this.formatDate(this.date);
  }

  formatDate(date) {
    let d = new Date(date),
      day = '' + d.getDate(),
      month = '' + (d.getMonth() + 1),
      year = d.getFullYear();
    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;
    return [year, month, day].join('-');
  }
}

[brandyscarney]

Since you are using Angular you should be using their property binding, for example:

<ion-datetime [max]="today"></ion-datetime>

More information on that here: https://angular.io/guide/template-syntax#property-binding

Also, the Angular syntax uses camelCase for properties, so instead of display-format it should be displayFormat. See the datetime usage here: https://beta.ionicframework.com/docs/api/datetime#usage

Please let me know if that resolves it for you, thanks!

[joel-daros]

@brandyscarney I think this issue reported by @jordanpurinton has been related to #15221

The <ion-datetime> can't pick any date of 2018. If you tried to set any 2018 date to min or max, it raises a error.

[brandyscarney]

@MrSparklle The Zone error looks like it is trying to parse the string "today" but failing because it is expecting to get it in year-month-day format. #15221 has been resolved so if that is the case then this is fixed. 🙂

[jordanpurinton]

Hey @brandyscarney , thanks for the reply.
I can bind to today just fine, however, as outlined by previous posts, the component cannot display a year past 2017.
Event without any or min max set, by default the component doesn't default to showing 2018.

[joel-daros]

@jordanpurinton update your Ionic to beta 6. This issue has been fixed.

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