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

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

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

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

    推荐文章