如何将日历图标添加到 ion-datetime 并将日历图标与选择器的右侧对齐答案

【问题标题】：How to add calendar icon to ion-datetime and align the calender icon to right side of the picker如何将日历图标添加到 ion-datetime 并将日历图标与选择器的右侧对齐
【发布时间】：2020-08-07 13:24:49
【问题描述】：

UX 团队的要求是在 ionic 5 中将日历图标添加到 ion-datetime。请帮我添加日历图标，它必须与右侧对齐。

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

【问题讨论】：

标签： angular7 ionic5

【解决方案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

【讨论】：

【解决方案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>

在 scss 中 ...

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

【讨论】：