Problem with multiple ion-datetime

Ionic Framework ionic-v3
1

if you check the below link, when you try to change the first DateTime the second one also gets changed.

Plunker link

Times = ["11:00", "11:00", "11:00", "11:00"];

<ion-list>
    <ion-item *ngFor="let Time of Times; let i=index">

      <!-- label displays correct value -->
      <ion-label>Actual value {{ Times[i] }}</ion-label>

      <!-- ion-datetime displays wrong value -->
      <ion-datetime [(ngModel)]="Times[i]" displayFormat="h:mm A"></ion-datetime>

    </ion-item>
  </ion-list>    indent preformatted text by 4 spaces
2

Seems to be an issue with the ngModel if i replace with
<ion-datetime [(ngModel)]="Time.selectedTime" displayFormat="h:mm A"></ion-datetime>
it seems to work fine

3

@cooLLedge sorry, it’s not the right solution. If your answer is working then it must be issue in ionic

1 Like
4

I think the issue is because youre trying to completely change the object whilst its in use with the ngFor and locked.

Ive tried adding a property into the array and that also seems to work for me

Forked into plunker so you can see how i mean.

5

@cooLLedge Thanks for the workaround. If you can see label can able to reflect the changes correctly. I guess it must be the problem with DateTime change detection.

1 Like
6

Hi!
I’ve a similar problem:

In a
*ngFor="let item of items

I want to display the names and the dates showing in the right format with

<h2><b>{{item.name}}</b></h2> <ion-datetime displayFormat="DD.MM.YY" [(ngModel)]="item.datum"></ion-datetime>

But only the date is showing up. Without the the names are showing, but with it, the names seems to be blocked and only the dates are showing.
What can I do to show my datestring in the right format?

7

for my formatting the angular
{{ item.datum | date:'dd.MM.yy' }}
is just working
but now its the problem that angular adjusts the local timezone by itsels, instead of taking the datestring plain like does

8

Whenever anybody has a problem with the datetime component, the very first thing they should check is “am I initializing its bound property with a valid ISO8601 string?”. If not, do so. Even if you don’t really want to; see if it affects your situation. I have seen all sorts of weirdness with ion-datetime get solved with this simple step.

9

I had the same issue as you when my html looked like this:

<ion-item>
  <h6> {{name}} </h6>
  <ion-datetime item-end></ion-datetime>
</ion-item>

Doing this will make the h6 dissapear. I fixed it by using ion-label to wrap everything left of the datetime instead.

<ion-item>
  <ion-label> {{name}} </ion-label>
  <ion-datetime item-end></ion-datetime>
</ion-item>
1 Like