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

【问题标题】：Use Ionic 5 date picker in Ionic 6在 Ionic 6 中使用 Ionic 5 日期选择器
【发布时间】：2023-03-07 16:23:03
【问题描述】：

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

【问题讨论】：

请分享一些代码...
请在我的 git github.com/sai7135/ionic6.git 中检查我的代码 fork 它会进行更改并在可能的情况下重新评论您的 git

【解决方案1】：

您可以使用一些黑客技术来做到这一点。 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%;
}

Demo Image Here

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

【讨论】：

谢谢这正是我想要的......
如何获取所选日期@Josemar
你得到两个 ion-datetime 的值并使用 Date 类或 date-fns 将它们组合成一个日期

【解决方案2】：

编辑： 据我了解，没有办法使用旧式 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>

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

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

【讨论】：

不，兄弟，我只需要我在图片中展示给您的圆柱形日期时间选择器，我没有选择只需要使用 ionic 6
你能在 ion-picker 上实现 datetime 并将 git repo 发给我吗？离子选择器看起来像 ionic5 日期时间中的那个
@saikiran 你知道 ionic5 选择器是否在桌面上用鼠标滚动？
是的，那对我有什么帮助