Ion-datetime not displaying initial value

Ionic Framework ionic-v3
1

So I have a datetime I cannot get to display the model value. It displays after I select a date, and the min/max dates work correctly, and date is actually there, but the date time does not display it. If I look at the html element, it appears to have/know the date because it’s in the model attrs but it’s not showing. Am i missing something? I’m using beta.37.

Template:

Team Name 
<ion-item>
    <ion-label floating>League Start Date</ion-label>
    <ion-datetime displayFormat="D MMM YYYY" pickerFormat="D MMM YYYY" [min]="minDate.toISOString()" [max]="maxDate.toISOString()"  [(ngModel)]="team.leagueStartDate"></ion-datetime>
</ion-item>
{{team.leagueStartDate}}

ts:

import {Logger} from “…/…/services/Logger”;
import {Component} from “@angular/core”;
import {League} from “…/…/models/league”;
import * as moment from ‘moment’;

@Component({
templateUrl: ‘build/components/create-team-league/create-team-league.html’
})
export class CreateTeamLeague {
team: League;
minDate: Date;
maxDate: Date;

constructor(private logger: Logger) {
    this.minDate = new Date();
    this.maxDate = moment().add(6, 'months').toDate();

    this.team = new League({
        leagueStartDate: new Date()
    });
}

}

ion-datetime rendered element:

ion-datetime displayformat=“D MMM YYYY” pickerformat=“D MMM YYYY” ng-reflect-min=“2016-08-16T15:10:21.067Z” ng-reflect-max=“2017-02-16T16:10:21.067Z” ng-reflect-display-format=“D MMM YYYY” ng-reflect-picker-format=“D MMM YYYY” ng-reflect-model=“Tue Aug 16 2016 11:10:21 GMT-0400 (EDT)” class=“ng-untouched ng-pristine ng-valid”>

2

Not sure, but somewhere somehow I remember having read that the in Ionic2, at least right now, can’t be initialized with a Date object but that it works fine with a string.

Maybe you could have a try, instead of leagueStartDate: new Date() try leagueStartDate: new Date().toISOString()

Again not sure about it, but hope it could be.

1 Like
3

Ahh yes. You’re right. Even more, it appears the field has to be a declared string (if typescript?) in order to work. I ended up fixing it like this:

constructor(private logger: Logger) {
    this.minDate = new Date();
    this.maxDate = moment().add(6, 'months').toDate();

    this.team = new League({
        leagueStartDate: new Date()
    });
}

get leagueStart(): string {
    return this.team.leagueStartDate.toISOString();
}

set leagueStart(value: string) {
    this.team.leagueStartDate = new Date(value);
}

and

    <ion-datetime displayFormat="D MMM YYYY" pickerFormat="D MMM YYYY" [min]="minDate.toISOString()" [max]="maxDate.toISOString()"  [(ngModel)]="leagueStart"></ion-datetime>

Thanks for the help.

1 Like