My goal is to dynamically adjust the end date picker based on the user's selection of the start date, and vice versa if the user decides to choose the end date first. Here is the code I have written:
<ion-item>
<ion-label>Start Date</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="MMM DD YYYY" ngControl="start" [(ngModel)]="start_date"></ion-datetime>
</ion-item>
<ion-label>{{getDate(start_date | date:'MMddy')}} </ion-label>
<ion-item>
<ion-label>End Date</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="MMM DD YYYY" ngControl="end" min="getDate(start_date | date:'MMddy')" ></ion-datetime>
</ion-item>
The start-date is initialized in the controller as new Date(), and the getDate function transforms the date format accordingly:
getDate(date){
date = date.split('\/');
date = date[2] + '-' + date[0] + '-' + date[1];
return date;
}
The label displayed using the code above shows the correct result: 2016-29-06 (today's date). However, the end date picker does not work with this logic. If I manually set the minimum date for the end datetime property like this, it works:
<ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="MMM DD YYYY" ngControl="end" min="2016-06-29" ></ion-datetime>