Datetime and Select Component do not displaying

Ionic Framework ionic-v3
1

Hello everyone,
I recently upgraded to the latest version of Ionic and all is well, it’s great. Except that I can not display the Datetime and Select components. When I check the html code from my browser, there is a large blank where the component should normally appear. Which makes me think that there is a build problem.

This what my Ionic info returns :

Your system information:

**Cordova CLI: 7.0.0 **
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.4

Can you help me please ? :frowning:

2

hai… @cee please check your scss file on that component… i’ve notice that style on ionic after upgrade a little bit different… if you use special class for your datetime and select component, i guess you need to delete it first and see what happen

3

Always share the relevant code too, that’ll help others to understand your problem much better.

4

My code looks like :

<ion-item class="question-item question-{{question.value.qr_type_widget}}" *ngIf="question.qr_type_widget == 'DateWidget'">
                <ion-label stacked>{{question.qr_question}} : </ion-label>
                <ion-datetime class="text-input" cancelText="Annuler" doneText="Ok" [ngClass]="{'item-mandatory': question.qr_reponse_oblig}" [(ngModel)]="question.qr_reponse" (ngModelChange)="doSave()">
                </ion-datetime>
              </ion-item>
1 Like
5

Try this:

Declare a variable in your component:

mydate: string = new Date("05/15/2017").toISOString();

… and in your template, use this markup:


<ion-item>
   <ion-label>Date</ion-label>
   <ion-datetime cancelText="Annuler" doneText="Ok" displayFormat="MM/DD/YYYY" 
   [(ngModel)]="mydate"></ion-datetime>
</ion-item>

If this shows you the date then:

  1. Make sure your *ngIf ain’t false
  2. question.qr_reponse returns a valid date

You might also need to update the Ionic Framework Version: 3.1.1 to the latest one.

6

Strangely, the component appears when I remove the ion-label :

<h4 class="item-label">My dirty label : </h4>
<ion-item class="question-item question-{{question.value.qr_type_widget}}" *ngIf="question.qr_type_widget == 'DateWidget'">                
                <ion-datetime class="text-input" cancelText="Annuler" doneText="Ok" [ngClass]="{'item-mandatory': question.qr_reponse_oblig}" [(ngModel)]="question.qr_reponse" (ngModelChange)="doSave()">
                </ion-datetime>
              </ion-item>

This is far from the best solution, but it works :stuck_out_tongue:

Thanks you all

7

That’s weird, the only thing I can think of right now is that probably the stacked label type is not getting enough vertical space for some reason and so it’s failing the whole thing. I’d suggest you to experiment a little and try changing the type of label, it’s always beneficial to understand how things work.

Anyways, if it’s at least working for you then it’s good! :+1:

1 Like
8

Okay. I’ll check it out. Thank you :wink:

1 Like