Ionic 如何自定义离子日期时间?

jobtbby3  于 2022-12-08  发布在  Ionic
关注(0)|答案(2)|浏览(192)

有没有办法改变这个组件的风格?不仅是一些基本的东西,如颜色和大小,但整个风格,按钮等。

bnlyeluc

bnlyeluc1#

First, please have a look at the documentation:

https://ionicframework.com/docs/api/components/datetime/DateTime/

Ionic DateTime components are looking like this one:

<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="myDate"></ion-datetime>
</ion-item>

[(ngModel)] keeps track of a variable that can be set by yourself inside your controller. displayFormat is a comman formatting schema for your date. If you want to display for example in German format, then you will have to write DD.MM.YYYY .

For styling modifications check:

https://ionicframework.com/docs/api/components/datetime/DateTime/#sass-variables. There are five ariables for each device type (iOS, Android and deprecated Windows Phone):

  • $datetime-ios-padding-top
  • $datetime-ios-padding-end
  • $datetime-ios-padding-bottom
  • $datetime-ios-padding-start
  • $datetime-ios-placeholder-color

For a working example look at the GitHub Page of Ionic:

https://github.com/ionic-team/ionic-docs/blob/master/src/demos/api/datetime/index.html

c8ib6hqw

c8ib6hqw2#

我知道这是一个老问题,但如果有人仍然需要一个方法来定制组件的外观,这里是我的方法。
我使用Angular的Renderer2将一个部件属性应用到(在我的例子中)日历日,这样我就可以根据需要设置它们的样式。

@ViewChild('calendar', { read: ElementRef, static: false }) calendar?: ElementRef;

ngAfterViewInit(): void {
    timer(200).subscribe(() => { //async issues I couldn't resolve
        const shadow: DocumentFragment = this.calendar?.nativeElement.shadowRoot;
        const days = shadow.querySelectorAll('.calendar-day');

      days.forEach(day => {
            this.renderer.setAttribute(day, 'part', 'day');
        });
    });
}

然后我用常规的scss来格式化。

ion-datetime {
  &::part(day) {
    border: 1px solid black;
    border-radius: 50%;
    width: 34px;
    height: 34px;
  }
}

相关问题