angular - Ionic2 两个 ion-datetime 彼此相邻

Question

所以，我有一个包含 ionic 内容的页面，其中包含一个 ionic 列表。

ionic 列表包含 ionic 项。这是输入、标签等元素的容器。

我做了一个(非常丑陋的)图像来代表我想要完成的事情。

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>

这是结果。

对于此示例，没有代码提供要在 ion-datetime 元素中显示的数据，但在我的项目中有。

有谁知道我怎样才能让它工作？

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

您可以使用 ion-row 和 ion-col 元素来实现该布局(或至少类似的东西):

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

尽管我不确定这在您的应用上下文中是否是一个有效选项。