Ionic 2 ion-datetime form binding

Question

I have the following:

<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>Add new</ion-title>
    </ion-navbar>
</ion-header>

<ion-content class="ion-backdrop" padding>
    <form [formGroup]="form1" class="form" (ngSubmit)="onSubmit(form1.value)">
        <ion-card>
            <ion-list>
                <ion-item>
                    <ion-label>Available:</ion-label>
                    <ion-datetime displayFormat="MMM DD YYYY" formControlName="dateAvailableFormControl">
                    </ion-datetime>
                </ion-item>
            </ion-list>
        </ion-card>     
    </form>
</ion-content>

and my ts code is:

this.dateAvailableFormControl.setValue(this.data.DateAvailable);

where this.data.DateAvailable is Date type.

I cannot see anything when page loads. All other bindings work fine except from the ion-datetime.

Does anyone knows why this happens?

Thanks in advance

Is it surrounded with <ion-item>? Maybe you could insert more of your code. — nyluje
– nyluje, Commented Nov 28, 2016 at 22:15
this looks correct to me. I use displayFormat as "D MMMM YYYY" in my case, but I guess "DD" is in the specs (maybe double check that). How does it look if you take all the <ion-item> part outside <ion-card>, and place it just beneath <form>? Are you sure this.data.DateAvailable is the right format is expecting likely a date formatted as it should display it (MMM DD YYYY)? — nyluje
– nyluje, Commented Nov 29, 2016 at 9:04
In the class linked to the html template, did you set that form1 (a FormGroup object) includes dateAvailableFormControl. Maybe this part of your code should be added too. — nyluje
– nyluje, Commented Nov 29, 2016 at 9:09
Check this post for more details: stackoverflow.com/a/47843362/7829826 — Daniel Delgado
– Daniel Delgado, Commented Dec 16, 2017 at 7:05

pantonis · Accepted Answer · 2016-11-29 09:21:19Z

2

I think I found what was the problem. Dont know if this is a bug of ionic 2 or is how it works with ng2.

My Date value was

2016-11-29T09:15:48.8579573Z

as soon as I change it to:

2016-11-29T09:15:48.857Z

it worked.

answered Nov 29, 2016 at 9:21

pantonis

6,70720 gold badges75 silver badges137 bronze badges

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

Collectives™ on Stack Overflow

Ionic 2 ion-datetime form binding

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related