代码之家 › 专栏 › 技术社区 › Jesus Poza

如何使用<ion按钮>调用<ion日期时间>?

ionic6 ionic-framework angular

0

Jesus Poza · 技术社区 · 3 年前

我正在尝试执行下一个操作:

我只想用下一个例子选择月份和年份:

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

但我不想让这个标签一直可见,我认为用按钮称呼它更方便。

有可能吗?

我尝试用以下方式调用datetime:

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

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

但我不想用天来工作/把它们展示给用户。

0 回复 | 直到 3 年前

1

2

uKioops 3 年前

对此有一个小小的解决方法。ion日期时间按钮确实不太好。我不知道为什么,但你仍然需要在模板中使用它,以便在打开时有一个美观的模态,但要在它上面使用“display:none”。

并使用内联模态isOpen属性用另一个按钮打开它。

要获取日期,您可以在ion datetime上使用(ionChange)方法。

HTML模板

        <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文件

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

CSS文件

#fake-click {
  display: none;
}

2

1

Laith Bzour 2 年前

在这样的离子7中:

 <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>

3

0

StackoverBlows 3 年前

Ionic Docs展示了如何使用 ion-datetime-button .

4

0

mattarau 2 年前

您可以使用 ion-datetime-button 你已经尝试过了,但你必须保持 ion-datetime s presentation 属性,并将该值设置为仅使用所需的ISO日期部分。

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

<ion-modal [keepContentsMounted]="true">
  <ng-template>
    <ion-datetime
      id="datetime"
      presentation="month-year"
      value="2023-09"
    ></ion-datetime>
  </ng-template>
</ion-modal>

请阅读 ISO Format 以及 Localization 在文档中了解值表示。

5

0

toxaq 2 年前

如果你 read the source of ion-datetime-button 它所做的一件事是添加 ion-datetime-button-overlay CSS类转换为离子模式或离子popover。你可以自己做这件事来复制它。

 <ion-button id="open-modal" expand="block">Open</ion-button>
 <ion-modal [keepContentsMounted]="true"  trigger="open-modal" class="ion-datetime-button-overlay">
   <ng-template>
     <ion-datetime id="datetime"></ion-datetime>
   </ng-template>
 </ion-modal>

你已经完成了(至少在造型方面)。