Ionic中ion-datetime显示日历图标而非默认右箭头的原因

针对你遇到的ion-datetime放在ion-popover内显示日历图标而非预期右箭头的问题，提供以下几种解决方案：

方案1：强制设置ion-datetime的显示模式 #

给popover内的ion-datetime添加mode="md"属性，强制使用Material Design风格的组件样式，该模式下的datetime默认会显示右箭头而非日历图标：

<ion-datetime mode="md" presentation="date" [(ngModel)]="tempDate" displayFormat="dd-MM-yyyy" class="form-text" name="txtDate" required>
</ion-datetime>

方案2：修正触发用的ion-input图标（若问题出在input旁） #

如果你实际是希望触发popover的ion-input旁显示右箭头而非日历图标，可给ion-input添加type="text"明确输入类型，避免浏览器或Ionic自动识别为日期输入：

<ion-input type="text" mode="md" class="form-text" [value]="dataUser.dateOfBirth | date: 'dd-MM-yyyy'" id="date" readonly (click)="openPopover($event)">
</ion-input>

也可以手动添加右箭头图标增强交互提示：

<ion-item lines="none" mode="md" class="form-item">
  <ion-label position="floating" mode="md" class="form-label">{{ 'date' | translate }}</ion-label>
  <ion-input type="text" mode="md" class="form-text" [value]="dataUser.dateOfBirth | date: 'dd-MM-yyyy'" id="date" readonly (click)="openPopover($event)"></ion-input>
  <ion-icon slot="end" name="chevron-forward" class="form-icon"></ion-icon>
  <!-- 其余popover代码不变 -->
</ion-item>

方案3：自定义CSS覆盖图标样式 #

如果上述方法无效，可通过自定义CSS替换默认的日历图标：
在组件的CSS文件（或全局样式文件）中添加：

/* 隐藏ion-datetime默认的日历图标 */
ion-datetime::part(icon) {
  display: none;
}

/* 添加自定义右箭头图标 */
ion-datetime::after {
  content: '';
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M233.4 105.4l128 128c12.5 12.5 12.5 32.8 0 45.3l-128 128c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L290.7 256 188.1 153.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0z"/></svg>');
  background-size: 24px 24px;
  width: 24px;
  height: 24px;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

内容的提问来源于stack exchange，提问作者Patrick