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

mrzz3bfm  于 2022-12-08  发布在  Ionic
关注(0)|答案(3)|浏览(321)

嗨,我正在使用离子5为我的项目,最近迁移到离子6一切看起来很棒,但有一件事让我担心的是日期时间选择器,我想在旧的风格,这种方式请帮助!

r8uurelv

r8uurelv1#

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之后),但在编程上你必须做很多工作。而且,正如我之前所说,这是一个黑客,所以我真的不推荐你使用它:-)

kuuvgm7e

kuuvgm7e2#

**EDIT:**据我所知,没有办法使用旧风格的用户界面。更多信息请访问: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

4szc88ey

4szc88ey3#

"你可以用这种方式"
<ion-datetime showDefaultButtons="true" presentation="date" #popoverDatetime1 (ionChange)="setPreferredDate(popoverDatetime1.value)" > </ion-datetime>

setPreferredDate(value) {
    const convertDate = format(parseISO(value), 'dd MMM , yyyy');
    this.schedulePreferredDate = convertDate;
  }

https://ionicframework.com/blog/the-new-datetime-component-in-ionic/

相关问题