Easy way to style the ionic-datetime header

Ionic Framework
1

Is there an easiest way to style the header background of the ion-datetime component?
In the documentation there is nothing related to that topic.
I have this code :


            <ion-modal trigger="openCalendar"
                       [backdropDismiss]="false">
              <ng-template>
                <ion-datetime id="birthdate"
                              (ionChange)="onBirthDateSelected($event)"
                              presentation="date"
                              [preferWheel]="true"
                              [locale]="'fr-FR'" #datetime>
                  <span slot="title">Service dédié aux majeurs</span>
                  <ion-buttons slot="buttons">
                    <ion-button color="primary" (click)="datetime.confirm(true)">Valider</ion-button>
                  </ion-buttons>
                </ion-datetime>
              </ng-template>
            </ion-modal>

By default it looks like this:
Default

What I would like is this (setting the background color to red or any color):
goal

I managed to do it but I would like a nicer solution. This is how I did it:


  @ViewChild('datetime', {read: ElementRef}) datetime!: ElementRef;

  ngAfterViewChecked() {
    if (this.datetime) {
      const shadowRoot = this.datetime.nativeElement.shadowRoot;
      const dateTimeHeaderDiv = shadowRoot.querySelector('.datetime-header');
      dateTimeHeaderDiv?.setAttribute('style', 'background-color: var(--ion-color-danger)');
    }
  }

It’s a bit tricky but it works. Do you have a nicer solution?
Thank you

2

At the moment, this part of the date time isn’t exposed for styling, so your current work around would work , though it does feel like a hack IMO.

I would open an issue asking if the core team could expose more internals for styling datetime.

3

Thank you,
Could you add the link of the issue here so I can follow its progression?

4

Another way I choose is not to use the [showDefaultTitle]=“true” property of the ion-datetime, instead the <span slot="title> is copied into the modal and styles are applied like this

            <ion-modal trigger="openCalendar" [backdropDismiss]="false">
                <ng-template>
                  <span slot="title">Service dédié aux majeurs </span>
                  <ion-datetime
                    id="birthdate"
                    (ionChange)="onBirthDateSelected($event)"
                    presentation="date"
                    [preferWheel]="true"
                    [locale]="'fr-FR'"
                    #datetime
                  >
                    <ion-buttons slot="buttons">
                      <ion-button
                        color="primary"
                        (click)="datetime.confirm(true)"
                        >Valider</ion-button
                      >
                    </ion-buttons>
                  </ion-datetime>
                </ng-template>
              </ion-modal>

In the global styles file we access the modal styles

ion-modal {
  --backdrop-opacity: 0.7 !important;

  span {
    color: white;
    font-weight: 900;
    background: red;
    padding: 20px;
  }
}
1 Like