How to customize Ionic Datetime?

Question

Is there any way to change the styling of this component? And not only some basic stuff like colour and size but the entire style, buttons, etc.

Answer 1

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

Answer 2

I know it's an old question, but if anyone still needs a method on customizing the look of the component here is my method.

I use Renderer2 from Angular to apply a part attribute to (in my case) calendar days so I can style them to my needs.

@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');
        });
    });
}

Then I used regular scss to format.

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