在 Ionic 6 中使用 Ionic 5 日期选择器

Question

您好，我在我的项目中使用 ionic 5，最近迁移到 ionic 6，一切看起来都很棒，但我担心的一件事是日期时间选择器，我希望以这种方式使用旧样式，请帮助！

Answer 1

编辑： 据我了解，没有办法使用旧样式 UI。在此处查看更多信息：Use ion-datetime v4 instead of v6

我认为最好的办法是使用新的 ion-date 并尝试使用 CSS/modal 属性实现旧样式。您可以尝试这样的操作：

<ion-button id="open-modal">Open Datetime Modal</ion-button>
<ion-modal   
[initialBreakpoint]="0.5" trigger="open-modal">
  <ng-template>
    <ion-content>
      <ion-datetime></ion-datetime>
    </ion-content>
  </ng-template>
</ion-modal>

您可以在此处找到有关如何使用新 date-picker 的更多示例：https://ionicframework.com/docs/api/datetime#usage

在这里您可以找到有关样式/使用模式的更多信息： https://ionicframework.com/docs/api/modal#inline-modal

Answer 2

您可以使用一些黑客技术来做到这一点。 ion-datetime 接受名为 yearValues 的属性，您可以在其中创建 'custom' 年值。

html:

  <div class="hacking-datetime">
    <ion-datetime presentation="year" [yearValues]="yearValues"></ion-datetime>
    <ion-datetime presentation="month-year"></ion-datetime>
  </div>

ts:

yearValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];

css:

.hacking-datetime {
  display: grid;
  grid-template-columns: 1fr 2fr;
  position: absolute;
  bottom: 0;
  width: 100%;
}

Demo Image Here

尽管它在视觉上与以前相同（当然是在一些 css 之后），但您必须以编程方式进行大量工作。而且，正如我之前所说，它是一种 hack，所以我真的不建议您使用它 :-)

在 Ionic 6 中使用 Ionic 5 日期选择器

Use Ionic 5 date picker in Ionic 6

ionic-framework

ionic5

ionic6