Ion-datetime (V6): Disable Month/Year Picker

Ionic Framework Ionic Angular
1

I’d like to disable the ion-datetime’s month/year picker, leaving the user to navigate months by using only the left and right arrows. There is no configuration option for this in the docs unfortunately, and that month/year element is in shadow dom. Does anyone know of a workaround to accomplish this?
Screen Shot 2022-05-31 at 9.58.21 AM

1 Like
2

Hello mate !
You access the show part of the component and do what you want to do.
Here is an exemple of disabling the ‘calendar-month-year’ mouse click.
disableMonthSelector() {
const ionDateTimeElement = document.getElementsByTagName(‘ion-datetime’);
const element = ionDateTimeElement[0].shadowRoot.getRootNode().firstChild as HTMLElement;
const monthsSelector = element.getElementsByClassName(
‘calendar-month-year’
)[0] as HTMLElement;
monthsSelector.style.pointerEvents = ‘none’;
}
Hope it helps !
Cheers :smiley:

3

Hello

this works for android but not for ios, do you have an idea whats the reason for that?
Or do you have another solution that might work for android and ios?

4

Did you find a solution to this?

5

I am losing my mind over this component.

6

you can use select ::part to do this.

try this


ion-datetime {
&::part(month-year-button) {
pointer-events: none;
}

unfortunately it is not possible to hide the arrow icon

7

Extremely hacky, but I’ve managed to make the month “read-only” without the arrow like this:

ion-datetime::part(month-year-button) {
    pointer-events: none;
    position: relative;

    &:after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: white;
        display: inline-block;
        width: 35px;
        z-index: 100;
    }
}
1 Like
8

There is only one observation point, with :after it will be necessary to add opacity: 1
or use :before

.calendar-month-year-toggle::after {
opacity: 0;
…
}