timeline

src/app/shared/agenda/new-event/new-event.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, NgControl } from '@angular/forms';
 
 import { IonicModule } from '@ionic/angular';
 
@@ -8,13 +8,24 @@ import { NewEventPageRoutingModule } from './new-event-routing.module';
 
 import { NewEventPage } from './new-event.page';
 import { NgbModule  } from '@ng-bootstrap/ng-bootstrap';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatInputModule} from '@angular/material/input';
+
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatMomentDateModule, MomentDateAdapter } from "@angular/material-moment-adapter";
+
+
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
     NewEventPageRoutingModule,
-    NgbModule, //
+    NgbModule,
+    MatDatepickerModule,
+    MatInputModule,
+    MatNativeDateModule,
+    
   ],
   declarations: [NewEventPage],
   exports: [NewEventPage]

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>

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

@@ -16,11 +16,46 @@ import { User } from 'src/app/models/user.model';
 import { AuthService } from 'src/app/services/auth.service';
 
 
+import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
+import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
+import * as _moment from 'moment';
+import * as _rollupMoment from 'moment';
+import {FormControl} from '@angular/forms';
+
+
+const moment = _rollupMoment || _moment;
+
+export const MY_FORMATS = {
+  parse: {
+    dateInput: 'LL',
+  },
+  display: {
+    dateInput: 'LL',
+    monthYearLabel: 'MMM YYYY',
+    dateA11yLabel: 'LL',
+    monthYearA11yLabel: 'MMMM YYYY',
+  },
+};
+
 @Component({
   selector: 'app-new-event',
   templateUrl: './new-event.page.html',
   styleUrls: ['./new-event.page.scss'],
+  providers: [
+    // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
+    // application's root module. We provide it at the component level here, due to limitations of
+    // our example generation script.
+    {
+      provide: DateAdapter,
+      useClass: MomentDateAdapter,
+      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
+    },
+
+    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
+  ]
 })
+
+
 export class NewEventPage implements OnInit {
 
 
@@ -49,6 +84,9 @@ export class NewEventPage implements OnInit {
 
   loggeduser: User;
 
+  date = new FormControl(moment());
+  // serializedDate = new FormControl((new Date()).toISOString());
+
   constructor(
     private modalController: ModalController,
     private eventService: EventsService,