timeline

src/app/shared/agenda/new-event/new-event.page.html

@@ -13,20 +13,22 @@
 <ion-content>
   <div class="main-content">
 
-    <form class="form-inline">
-      <div class="form-group">
-        <div class="input-group">
-          <input class="form-control" placeholder="yyyy-mm-dd"
-                name="dp"  ngbDatepicker #d="ngbDatepicker">
-          <div class="input-group-append">
-            <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
-          </div>
-        </div>
-      </div>
-    </form>
 
-    <!-- 2. datepicker in the popup -->
-    <input type="text" ngbDatepicker #d="ngbDatepicker"/>
+    <!-- <mat-form-field appearance="fill">
+      <mat-label>Choose a date</mat-label>
+      <input matInput [matDatepicker]="picker2">
+      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
+      <mat-datepicker #picker2></mat-datepicker>
+    </mat-form-field> -->
+
+    
+    <!-- <mat-form-field appearance="fill">
+      <mat-label>Angular forms</mat-label>
+      <input matInput [matDatepicker]="picker1" [formControl]="date">
+      <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+      <mat-datepicker #picker1></mat-datepicker>
+    </mat-form-field> -->
+
 
     <div class="ion-item-container">
       <ion-input type="text"  placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
@@ -91,6 +93,7 @@
         </div>
         <div class="ion-input-class flex-grow-1">
           <ion-datetime 
+            class="d-md-none"
             placeholder="Início"
             [(ngModel)]="postEvent.StartDate"
             displayFormat="D MMM YYYY H:mm"
@@ -100,6 +103,18 @@
             max="2022" 
           >
           </ion-datetime>
+
+          <input 
+            class="d-none d-md-block width-100"  
+            placeholder="Início" 
+            [matDatepicker]="picker" 
+            (focus)="picker.open()" 
+            (click)="picker.open()"
+            [(ngModel)]="postEvent.StartDate"
+          >
+          <mat-datepicker #picker></mat-datepicker>
+      
+      
           <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
         </div>
       </div>