ion-datetime must be in <ion-item> or full visible screen is click target

Note: If you are having problems formatting your issue please refer to this article on using markdown in Github:

https://guides.github.com/features/mastering-markdown/

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/ http://ionicworldwide.herokuapp.com/

Short description of the problem:

When using the <ion-datetime> component in a Card, the entire visible screen is a clickable target that will open the selector. This prevents multiple datetime components or other components from being able to be clicked. Elements rendered outside of the initial screen render are not overlayed.

What behavior are you expecting?

<ion-datetime> components should only be clickable in their immediate container, be it a card or a grid column.

Steps to reproduce:

1. Use the first set of code below to see that the entire screen is clickable. This occurs on the browser and iOS; not tested on Android.
2. Use the second set of code below to see the workaround fix.

Set 1:

<ion-card>
    <ion-card-header>
      Date Range
    </ion-card-header>
    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col width-25>
            <ion-label>Dates:</ion-label>
          </ion-col>
          <ion-col>
            <ion-datetime displayFormat="MM/DD/YY to" pickerFormat="YYYY MMM DD" [(ngModel)]="startDate"> </ion-datetime>
          </ion-col>
          <ion-col width-33>
            <ion-datetime displayFormat="MM/DD/YY" pickerFormat="YYYY MMM DD" [(ngModel)]="endDate"> </ion-datetime>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>

Code set 2:

  <ion-card>
    <ion-card-header>
      Date Range
    </ion-card-header>
    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col width-25>
            <ion-label>Dates:</ion-label>
          </ion-col>
          <ion-col>
            <ion-item>
              <ion-datetime displayFormat="MM/DD/YY to" pickerFormat="YYYY MMM DD" [(ngModel)]="startDate"> </ion-datetime>
            </ion-item>
          </ion-col>
          <ion-col width-33>
            <ion-item>
              <ion-datetime displayFormat="MM/DD/YY" pickerFormat="YYYY MMM DD" [(ngModel)]="endDate"> </ion-datetime>
            </ion-item>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>

Which Ionic Version? 2.0.0-beta.32

Plunker that shows an example of your issue

For Ionic 1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview

For Ionic 2 issues - http://plnkr.co/edit/me3Uk0GKWVRhZWU0usad?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)

$ ionic info

Your system information:

Cordova CLI: 6.2.0 Gulp version: CLI version 3.9.0 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.10 Ionic CLI Version: 2.0.0-beta.32 Ionic App Lib Version: 2.0.0-beta.18 ios-deploy version: 1.8.6 ios-sim version: 5.0.4 OS: Mac OS X El Capitan Node Version: v5.11.1 Xcode version: Xcode 7.3.1 Build version 7D1014

[mayur-padshala]

I had the markup as:

<ion-item>
  <ion-label>Sunday</ion-label>
  <ion-datetime displayFormat="hh:mm A" placeholder="10:00 AM"
                [(ngModel)]="shop.sunday.opening"></ion-datetime>
  <ion-datetime displayFormat="hh:mm A" placeholder="07:00 PM"
                [(ngModel)]="shop.sunday.closing"></ion-datetime>
</ion-item>

Also had the same issue where the second ion-datetime would get triggered.

This is what I did: css:

ion-datetime {
  button {
    position: relative !important;
  }

  .datetime-text {
    overflow: visible;
  }

  flex: 1;
}

Hope this helps someone else too.

[brandyscarney]

So this is because .item has position: relative on it and when ion-datetime is not placed inside of an item the closest relatively positioned element to it is the content which causes the clickable area to cover the entire screen. I believe the solution is to make ion-datetime itself relatively positioned:

ion-datetime {
  position: relative;
}

I’ll have to confirm this doesn’t have any negative side effects though.