Ionic 2 : ion-datetime return empty value

Question

I use an ion-datetime picker in one of my page to select only a month. I wrote this in my .html :

    <ion-item>
          <ion-label>Mois</ion-label>
          <ion-datetime [(ngModel)]="month"
                        displayFormat="MMMM"
                        monthNames="Janvier, Février, Mars, Avril, Mai, Juin, Juillet, Aout, Septembre, Octobre, Novembre, Décembre"
                        doneText="Valider" cancelText="Annuler">
         </ion-datetime>
   </ion-item>

But when I pick a month with this field, I have an empty value.

My .ts file :

month: any  = null;

  constructor(public viewCtrl: ViewController) {

  }

  dismiss() {
    this.viewCtrl.dismiss();
  }

  test() {
    console.log(this.month);
  }

Any Idea ?

emroussel · Accepted Answer · 2017-07-13 22:54:12Z

1

I also ran into similar problems using Ionic's DateTime component.

Initializing the value bound to ngModel seemed to fix it for me, although this will give a default value to the picker (which might be useful depending on your use case).

Ionic's DateTime works in ISO 8601 format, so doing something like this in your constructor would give the picker a default value of the current month

constructor(public viewCtrl: ViewController) {
  this.month = (new Date()).toISOString();
}

The value of month will be updated when the picker changes, but it will be in ISO 8601 format again, so you'll have to extract the month from it if that is the value you are looking for.

I would be happy to know if there is a cleaner solution for this!

answered Jul 13, 2017 at 22:54

emroussel

1,14711 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ionic 2 : ion-datetime return empty value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related