1

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

在此处输入图像描述

4

2 回答 2

2

你可以使用一些黑客来做到这一点。ion-datetime接受一个名为的属性，yearValues您可以在其中创建“自定义”年份值。

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%;
}

演示图片在这里

尽管它在视觉上与以前相同（当然是在一些 css 之后），但您必须做很多工作。而且，正如我之前所说的那样，这是一个 hack，所以我真的不建议你使用它 :-)

于 2022-01-29T04:44:44.750 回答
0

编辑： 据我了解，没有办法使用旧式 UI。在此处查看更多信息：使用 ion-datetime v4 而不是 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>

在这里您可以找到更多有关如何使用新日期选择器的示例：https ://ionicframework.com/docs/api/datetime#usage

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

于 2022-01-25T07:20:19.880 回答