How can i call an using an ?

Question

im trying to perform the next action:

I just wanna select month and year with the next example:

<ion-datetime presentation="month-year"></ion-datetime>

But i dont want this label visible all the time, i think its way more convenient to call it using a button.

Is it possible?

I tried calling the datetime with:

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

<ion-modal [keepContentsMounted]="true">
  <ng-template>
    <ion-datetime id="datetime"></ion-datetime>
  </ng-template>
</ion-modal>

But i dont want to work with days/show them to the user.

score 0 · Answer 1 · answered May 04 '23 at 13:10

0

Ionic Docs shows how to do this using ion-datetime-button.

answered May 04 '23 at 13:10

StackoverBlows

473
7

score 0 · Answer 2 · answered May 04 '23 at 19:51

There is a little workaround for that. ion-datetime-button is not great indeed. I don't know why, but you still need it in the template to have a great looking modal when it open, but use 'display: none' on it.

And use the inline-modal isOpen property to open it with another button.

To get the date, you can use the (ionChange) methods on ion-datetime.

HTML Template

        <ion-button fill="clear" (click)="openCalendar()">
          <ion-icon slot="icon-only" name="calendar-outline" color="primary" size="small"></ion-icon>
        </ion-button>

        <ion-datetime-button datetime="datetime" id="fake-click"></ion-datetime-button>
        <ion-modal [keepContentsMounted]="true" [isOpen]="showCalendar" (didDismiss)="cancelCalendar()">
          <ng-template>
            <ion-datetime
              id="datetime"
              presentation="month-year"
              [showDefaultButtons]="true"
              doneText="Confirm"
              cancelText="Cancel"
            ></ion-datetime>
          </ng-template>
        </ion-modal>

TS file

  openCalendar() {
    this.showCalendar = true;
  }
  cancelCalendar() {
    this.showCalendar = false;
  }

CSS file

#fake-click {
  display: none;
}

Dunno why you got downvoted - this is a great answer as `ion-datetime-button` is very restricted. This approach allows full control over the button and the modal. — Stafford Williams, Jun 05 '23 at 08:39

score 0 · Answer 3 · answered Jul 05 '23 at 22:59

In ionic 7 like this :

 <ion-datetime-button datetime="dateBtn"></ion-datetime-button>

  <ion-popover  [keepContentsMounted]="true" alignment="center" mode="ios" 
   animated="false" >
    <ng-template>
      <ion-datetime id="dateBtn"
       preferWheel="false"
      [showDefaultButtons]="true"
      [cancelText]="'cancel' | translate"
      [doneText]="'setDate' | translate"
      presentation="month-year"></ion-datetime>
    </ng-template>
  </ion-popover>

How can i call an using an ?

3 Answers3