Ionic2 两个 ion-datetime 彼此相邻

Question

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

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

我制作了一个（非常丑陋的）图像来代表我想要完成的事情。

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>

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

Ionic2 两个 ion-datetime 彼此相邻

Ionic2 two ion-datetime next to each other

typescript

ionic2

ionic3

angular