add ion-datetime on ion-popover

tatsuyasenbom · Dec 16, 2021 · 572165a · 572165a
1 parent 70c8bba
commit 572165a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/src/app/tab1/tab1.page.html b/src/app/tab1/tab1.page.html
@@ -1,8 +1,12 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 1
-    </ion-title>
+    <ion-label (click)="openPopover()">Open ion-popover</ion-label>
+    <ion-popover [isOpen]="isPopover" arrow="false" style="--offset-y: -35%;">
+      <ng-template>
+        <ion-datetime local="ja-JP" presentation="date" showDefaultTimeLabel="false"
+          min="2019"></ion-datetime>
+      </ng-template>
+    </ion-popover>
   </ion-toolbar>
 </ion-header>
 

diff --git a/src/app/tab1/tab1.page.ts b/src/app/tab1/tab1.page.ts
@@ -7,6 +7,17 @@ import { Component } from '@angular/core';
 })
 export class Tab1Page {
 
+  public date = new Date();
+  public isPopover = false;
+
   constructor() {}
 
+  openPopover() {
+    if (this.isPopover) {
+      this.isPopover = false;
+    } else {
+      this.isPopover = true;
+    }
+  }
+
 }