Ionic Datetime Issue

Ionic Framework
1

I’m having issues when I use the ion-datetime control on my Ionic screens. When I insert an ion-datetime control on a screen, then all my other input-text fields become ion-datetime fields. When I click on a non-datetime field to insert data, the Ionic datetime picker appears even though that field is not using ion-datetime for its input. What could be wrong, and how do I fix this? Please help

2

Weird please add html/ts files code.

3

HTML Code…

      <ion-row class="rowStyle">
        <ion-label stacked>Movie Title</ion-label>
        <ion-input type="text" [(ngModel)]="movieName" clearInput="true"></ion-input>
      </ion-row>

      <ion-row class="rowStyle">
        <ion-label stacked>Movie Date</ion-label>
        <ion-datetime displayFormat="MMM DD, YYYY"  [(ngModel)]="movieDate"></ion-datetime>
      </ion-row>

      <ion-row class="rowStyle">
        <ion-label stacked>Start Time</ion-label>
        <ion-datetime displayFormat="h:mm A" [(ngModel)]="movieStartTime"></ion-datetime>
      </ion-row>

      <ion-row class="rowStyle">
        <ion-label stacked>Cinema</ion-label>
        <ion-input type="text" [(ngModel)]="movieCinema" clearInput="true"></ion-input>
      </ion-row>

      <ion-row class="rowStyle">
        <ion-label stacked>Meetup Time</ion-label>
        <ion-datetime displayFormat="h:mm A" [(ngModel)]="movieMeetUpTime"></ion-datetime>
      </ion-row>

      <ion-item class="rowStyle">
        <ion-icon name="contact" color="dark"></ion-icon>
        <ion-datetime displayFormat="MMM DD, YYYY HH:mm" [(ngModel)]="startTime"></ion-datetime>
      </ion-item>

<button ion-button icon-start block clear color=“light” (click)=“itemGroupSelect();”>Invite Friends

.TS Code…
export class ItemCreateEventMoviePage {

currentItems: Item[];

isReadyToSave: boolean;

item: any;

movieEventForm: FormGroup;

constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController, formBuilder: FormBuilder, public modalCtrl: ModalController, public items: Items) {

this.currentItems = this.items.query();

this.movieEventForm = formBuilder.group({
  movieName: ['', Validators.required],
  movieDate: [''],
  movieCinema: [''],
  movieMeetUpTime: [''],
  movieStartTime: [''],
  timeStarts: ['12:00:00']
});

// Watch the form for changes, and
this.movieEventForm.valueChanges.subscribe((v) => {
  this.isReadyToSave = this.movieEventForm.valid;
});

}

4

Changes:

  1. Add tag with attribute “formGroup” which is the form you create in constructor
  2. replace any input ngModel with formControlName
    html
<form [formGroup]="movieEventForm">
      <ion-row class="rowStyle">
        <ion-label stacked>Movie Title</ion-label>
        <ion-input type="text" formControlName="movieName" clearInput="true"></ion-input>
      </ion-row>

      <ion-row class="rowStyle">
        <ion-label stacked>Movie Date</ion-label>
        <ion-datetime displayFormat="MMM DD, YYYY"  formControlName="movieDate"></ion-datetime>
      </ion-row>

      <ion-row class="rowStyle">
        <ion-label stacked>Start Time</ion-label>
        <ion-datetime displayFormat="h:mm A" formControlName="movieStartTime"></ion-datetime>
      </ion-row>

      <ion-row class="rowStyle">
        <ion-label stacked>Cinema</ion-label>
        <ion-input type="text" formControlName="movieCinema" clearInput="true"></ion-input>
      </ion-row>

      <ion-row class="rowStyle">
        <ion-label stacked>Meetup Time</ion-label>
        <ion-datetime displayFormat="h:mm A"formControlName="movieMeetUpTime"></ion-datetime>
      </ion-row>

      <ion-item class="rowStyle">
        <ion-icon name="contact" color="dark"></ion-icon>
        <ion-datetime displayFormat="MMM DD, YYYY HH:mm" formControlName="startTime"></ion-datetime>
      </ion-item>  
</form>
<button ion-button icon-start block clear color=“light” (click)=“itemGroupSelect();”>Invite Friends
5

I’ve done just that and still no luck. Any more ideas?