Ionic2 two ion-datetime next to each other

Question

So, I've got page which contains an ion-content and this contains a ion-list.

An ion-list contains ion-items. This is a container for elements like an input, label, etc.

I made a (very ugly) image which represent what I want to accomplish.

This is code that works to get the 2 labels next to each other like the picture above (blue sections).

  <ion-item>
    <ion-label>Label 1</ion-label>
    <ion-label>Label 2</ion-label>
  </ion-item>

Now I want to get 2 ion-datetime elements next to each other, so I tried this.

  <ion-item>
    <ion-datetime></ion-datetime>
    <ion-datetime></ion-datetime>
  </ion-item>

This is the result.

For this example there is no code to provide data to show in the ion-datetime elements, but in my project there is.

Does anyone know how i can get this to work?

Below is an example how to get it working. We figured it's a bug so I reported it here https://github.com/driftyco/ionic/issues/9818.

Answer 1

You can use ion-row and ion-col elements to achieve that layout (or something similar at least):

  <ion-list>
    <ion-row>
      <ion-col>
        <ion-item>
          <ion-label>Label 1</ion-label>
        </ion-item>
      </ion-col>
      <ion-col>
        <ion-item>
          <ion-label>Label 2</ion-label>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-item>
          <ion-datetime [(ngModel)]="startDate"></ion-datetime>
        </ion-item>
      </ion-col>
      <ion-col>
        <ion-item>
          <ion-datetime [(ngModel)]="endDate"></ion-datetime>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-list>

Although I'm not sure if this is a valid option in the context of your app.