How could I pass a variable into an Ionic datetime input property?

I would like to pass a variable, someVar, into the max attribute (input property) of an Ionic 2 (and Angular 2) DateTime component. It seems to only accept a hard-coded string, e.g. max="2017-08-31".

HTML

<ion-datetime displayFormat="DD/MM/YYYY" max="someVar" [(ngModel)]="toDate"></ion-datetime>

JavaScript

export class myPage {

  public someVar: string = ''; // linked to another user input

  constructor() {}

}

i assume that's angular 2? you could pass it as a string, for example:

<ion-datetime displayFormat="DD/MM/YYYY" max="some-var" [(ngModel)]="'fromDate'"></ion-datetime>

notice the quotes (')

Ionic's datetime input has been designed so developers can avoid the common pitfalls, allowing developers to easily format datetime values within the input, and give the user a simple datetime picker for a great user experience. ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ. Ionic uses the ISO 8601 datetime format for its value.

While I was not able to pass a variable to the max property, passing today's date to ngModel ensures that the maximum date available for that field is 31 December of the current year.

Capping the "To" date at today would have been nice but it is not essential.

Fortunately, Ionic's datetime input has been designed so developers can avoid the common pitfalls, allowing developers to easily format datetime values within the input, and give the user a simple datetime picker for a great user experience. ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ. Ionic uses the ISO 8601 datetime format for its value.

To pass variable to max property, pass it in {{ }} like this

<ion-datetime #picker pickerFormat="DD MMM YYYY" min="2018" max="{{ this.todayDate }}"></ion-datetime>

Overriding Ionic Variables RTL Support Ionicons; CLI; WKWebview; Troubleshooting; Developer Resources; Overriding Ionic Sass Variables. Improve this doc There are many variables you can override with Ionic. Any of the following variables can be overridden from your src/theme/variables.scss file, just add a new value to the file:

Your “test” array variable is either undefined or it is not present in the scope where you are running the loop. Delare it globally or inside required function using test = [];.

A variable declaration looks a lot like a property declaration: it’s written <variable>: <expression>. Unlike a property, which can only be declared in a style rule or at-rule, variables can be declared anywhere you want. To use a variable, just include it in a value.

If the user hits cancel, we can reset the value back to NULL on the datetime event ionCancel. I've tried doing this by using the (click) event but the datetime dialog view is opened before I can set the datetime value through click therefore showing the MAX value. Appreciate any comments or possible work arounds. Thanks.

Comments
  • change max="someVar" and public someVar: string = '';
  • Yes, Angular 2. The problem is with the max attribute, which is an input for the DateTime component. I tried passing it a string, for example: max="'some-var'" but that doesn't work.
  • been trivial, but if the example is like in the code, the naming convention might be problematic (should use someVar in the html instead of some-var)
  • The code is not like the example but well spotted, I thought it looked wrong!
  • To pass variable to max property, do this ` max="{{ this.maxDate }}" ` where of course, maxDate is declared in the .ts file