Как добавить значок календаря в ion-datetime и выровнять значок календаря с правой стороны средства выбора

Question

Требование от команды UX - добавить значок календаря в ion-datetime в ioni c 5. Пожалуйста, помогите мне добавить значок календаря, и он должен быть выровнен по правой стороне.

   <ion-item>
      <ion-label position="floating">MM/DD/YYYY</ion-label>
      <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
    </ion-item>

Answer 1

Вы можете сделать это:

<section>
  <ion-datetime placeholder="Select a date" displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
  <ion-icon name="calendar"></ion-icon>  
</section>

section {
  border: 1px solid gray;
  display: flex;
  align-items: center ;
  justify-content: space-between;
  padding: 0 1rem;
  max-width: 300px;
  width: 100%;
}

ion-datetime {
  width: 100%;
}

https://stackblitz.com/edit/ionic-bfvxgh

Answer 2

что можно сделать таким образом ...

<ion-item>
    <ion-row>
          <ion-col>
            <ion-label position="floating">MM/DD/YYYY</ion-label>
            <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
          </ion-col>
          <ion-col>
            <ion-icon style="padding-top: 10pt; padding-left: 10pt;" name="calendar-outline"></ion-icon>      
          </ion-col>
        </ion-row>
</ion-item>

и в s css ...

ion-icon {
    width: 30px;
    height: 30px;
}