/ / Ionic2 dwie godziny-datetime obok siebie - kątowe, maszynopis, jonowe2, jonowe3

Ionic2 dwie wartości dat jonowe obok siebie - kątowe, maszynopis, jonowe2, jonowe3

Tak więc mam stronę zawierającą zawartość jonów, która zawiera listę jonów.

Lista jonowa zawiera przedmioty jonowe. To jest kontener dla elementów takich jak dane wejściowe, etykiety itd.

Zrobiłem (bardzo brzydki) obraz, który reprezentuje to, co chcę osiągnąć.

Czego chcę

To jest kod, który działa tak, aby uzyskać 2 etykiety obok siebie, jak na powyższym rysunku (niebieskie sekcje).

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

Teraz chcę uzyskać 2 elementy datetime-datetime obok siebie, więc spróbowałem tego.

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

To jest wynik.

Wynik

W tym przykładzie nie ma kodu dostarczającego dane do pokazania w elementach datetime, ale w moim projekcie jest.

Czy ktoś wie, jak mogę to uruchomić?

Poniżej znajduje się przykład, jak to działa. Ustaliliśmy, że to błąd, więc zgłosiłem to tutaj https://github.com/driftyco/ionic/issues/9818.

Odpowiedzi:

2 dla odpowiedzi № 1

Możesz użyć ion-row i ion-col elementy do osiągnięcia tego układu (lub przynajmniej coś podobnego):

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

Chociaż nie jestem pewien, czy jest to ważna opcja w kontekście Twojej aplikacji.