嗨,我正在使用离子5为我的项目,最近迁移到离子6一切看起来很棒,但有一件事让我担心的是日期时间选择器,我想在旧的风格,这种方式请帮助!
r8uurelv1#
ion-datetime接受一个名为yearValues的属性,您可以在其中创建“自定义”年份值。html:
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:
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:
css
.hacking-datetime { display: grid; grid-template-columns: 1fr 2fr; position: absolute; bottom: 0; width: 100%; }
Demo Image Here虽然它在视觉上和以前一样(当然是在一些css之后),但在编程上你必须做很多工作。而且,正如我之前所说,这是一个黑客,所以我真的不推荐你使用它:-)
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
4szc88ey3#
"你可以用这种方式"<ion-datetime showDefaultButtons="true" presentation="date" #popoverDatetime1 (ionChange)="setPreferredDate(popoverDatetime1.value)" > </ion-datetime>
<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/
3条答案
按热度按时间r8uurelv1#
ion-datetime
接受一个名为yearValues
的属性,您可以在其中创建“自定义”年份值。html
:ts
:css
:Demo Image Here
虽然它在视觉上和以前一样(当然是在一些css之后),但在编程上你必须做很多工作。而且,正如我之前所说,这是一个黑客,所以我真的不推荐你使用它:-)
kuuvgm7e2#
**EDIT:**据我所知,没有办法使用旧风格的用户界面。更多信息请访问:Use ion-datetime v4 instead of v6
我认为最好的办法是使用新的ion-date,并尝试使用CSS/modal属性实现旧的样式。
您可以在这里找到更多有关如何使用新日期选择器的示例:https://ionicframework.com/docs/api/datetime#usage
在这里你可以找到更多关于造型/使用模态的信息:https://ionicframework.com/docs/api/modal#inline-modal
4szc88ey3#
"你可以用这种方式"
<ion-datetime showDefaultButtons="true" presentation="date" #popoverDatetime1 (ionChange)="setPreferredDate(popoverDatetime1.value)" > </ion-datetime>
https://ionicframework.com/blog/the-new-datetime-component-in-ionic/