Programatically open and close ion-datetime

Question

Is there a way to open an ion-datetime programatically?

in Ionic 6 the ion-datetime is open all the time, but it can be hidden using an ion-modal and ion-datetime-button like this

        <ion-datetime-button #datetimeTrigger datetime="datetime"></ion-datetime-button>

        <ion-modal [keepContentsMounted]="true">
            <ng-template>
                <ion-datetime #datetime
                              id="datetime"
                              presentation="date"
                              (ionChange)="newDatePicked($event)"

                              (ionFocus)="handleDateFocus()"
                              (ionBlur)="handleDateBlur()"
                              [firstDayOfWeek]="1">
                </ion-datetime>
            </ng-template>
        </ion-modal>

I would like to open the date-time picker programatically because it is being triggered by an internal event

I can close it using datetime.confirm(true).

update I've managed to get it partially working, but involves rather more market than I was expecting

    <ion-datetime-button datetime="datetime" hidden></ion-datetime-button>
    <ion-button id="open-modal" hidden>X</ion-button>
    <ion-modal [keepContentsMounted]="true" trigger="open-modal" (didDismiss)="didDismiss()">
      ....
    </ion-modal>

When I want to open the dat time picker I do this

    document.getElementById('open-modal').click();

This works but it seems strange that I have to have both the ion-datetime-button and the ion-button. Programatically clicking on the ion-datetime-button does nothing, and removing it from the markup ruins the display of the date picker.

De Wet van As · Answer 1 · 2023-05-10T08:32:49.093

0

You can programatically fire the click event of the which in turn will open the as it is already referenced as the trigger.

component.ts

//declaration
@ViewChild('datetimeTrigger', { static: false }) datetimeTrigger: any;

// function
openDateTimeModal(){
  this.datetimeTrigger.el.click();
}

component.html

//specify view child component with #
<ion-datetime-button #datetimeTrigger datetime="datetime"></ion-datetime-button>

edited May 10 '23 at 08:32

answered May 09 '23 at 08:38

De Wet van As

904
8
27

1

I could not get that to work, it keeps telling me 'underfed is not an object' as if datetimeTrigger has not been initialised or is out of scope. What I've got working at the moment is to add an ion-button with and ID and set that ID as the trigger of the ion-modal and then call click on the button. I'll add this to the question – Craig May 10 '23 at 02:11
@Craig please see my updated answer. Changing the ViewChild type and click event worked for me. – De Wet van As May 10 '23 at 08:33
1

No change. I even added a `(click)=iWasClicked()` test function to the ion-date-button to prove it was receiving the click, which it was, but it does not trigger the ion-modal to open and show the ion-datetime – Craig May 10 '23 at 20:17

gaspar · Answer 2 · 2023-07-17T18:42:35.657

The problem is actually that when you open the IonModal via IonDatetimeButton's datetime property alone, it doesn't seem to operate via isOpen. I don't know whether this is intended behavior or a bug. Anyway, when I explicitly use isOpen for opening (in addition to connecting via id), the closing works. Below is my working React implementation (with const [showModal, setShowModal] = useState(false);).

<IonItem button={false}>
    <IonLabel>Date of Birth:</IonLabel>
    <IonDatetimeButton datetime='datepicker' onClick={() => { setShowModal(true); }}></IonDatetimeButton>
    <IonModal keepContentsMounted={true} isOpen={showModal}>
        <IonDatetime
            id="datepicker"
            presentation="date"
            max={maxDate}
            onIonChange={e => {
                setDateOfBirth(e.detail.value as string);
                setShowModal(false);
            }}
        />
    </IonModal>
</IonItem>

Programatically open and close ion-datetime

2 Answers2