Ionic2 two ion-datetime uno al lado del otro - angular, mecanografiado, ionic2, ionic3

Por lo tanto, tengo una página que contiene un contenido de iones y esta contiene una lista de iones.

Una lista de iones contiene iones de iones. Este es un contenedor para elementos como una entrada, etiqueta, etc.

Hice una imagen (muy fea) que representa lo que quiero lograr.

Este es un código que funciona para poner las 2 etiquetas una al lado de la otra como en la imagen de arriba (secciones azules).

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

Ahora quiero tener 2 elementos ion-datetime uno al lado del otro, así que intenté esto.

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

Este es el resultado.

Para este ejemplo no hay código para proporcionar datos para mostrar en los elementos ion-datetime, pero en mi proyecto hay.

¿Alguien sabe cómo puedo hacer que esto funcione?

A continuación se muestra un ejemplo de cómo hacer que funcione. Pensamos que es un error, así que lo informé aquí. https://github.com/driftyco/ionic/issues/9818.

Respuestas

Puedes usar ion-row y ion-col Elementos para lograr ese diseño (o algo similar al menos):

  <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>

Aunque no estoy seguro de si esta es una opción válida en el contexto de su aplicación.