Add date picker

package-lock.json

@@ -372,6 +372,22 @@
         }
       }
     },
+    "@angular-material-components/datetime-picker": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@angular-material-components/datetime-picker/-/datetime-picker-6.0.3.tgz",
+      "integrity": "sha512-Pc11woDH0leghqhvqRDKy4/bk3sdYV8f7IJO8om50YTeF2/y9+RfQinxL1JTaojdJ/PBeyGTJlsK3wdxjVZ0cA==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "@angular-material-components/moment-adapter": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-material-components/moment-adapter/-/moment-adapter-6.0.0.tgz",
+      "integrity": "sha512-YnUfaaYIsK1xeN3D84RGc500ieh7BrgSK1DNh3abneeKGTS9es9FJPkqK3JW9P+8460YQ4hxrMMeerGLG30C5A==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
     "@angular/animations": {
       "version": "11.2.2",
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-11.2.2.tgz",

package.json

@@ -16,6 +16,8 @@
     "@angular-devkit/architect": "^0.1102.1",
     "@angular-devkit/core": "^11.2.1",
     "@angular-devkit/schematics": "^11.2.1",
+    "@angular-material-components/datetime-picker": "^6.0.3",
+    "@angular-material-components/moment-adapter": "^6.0.0",
     "@angular/animations": "^11.1.0",
     "@angular/cdk": "^11.2.13",
     "@angular/common": "^11.2.2",

src/app/app.module.ts

@@ -33,6 +33,12 @@ import { ChatService } from './services/chat.service';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 // import { FCM } from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx';
 
+import {
+  NgxMatDatetimePickerModule, 
+  NgxMatNativeDateModule, 
+  NgxMatTimepickerModule 
+} from '@angular-material-components/datetime-picker';
+
 
 @NgModule({
   declarations: [AppComponent],
@@ -50,7 +56,12 @@ import {MatDatepickerModule} from '@angular/material/datepicker';
     HttpClientModule, 
     // NgbModule, 
     NoopAnimationsModule,
-    MatDatepickerModule
+    MatDatepickerModule,
+
+    //
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule
     ],
   providers: [
     StatusBar,

src/app/home/home.page.ts

@@ -65,7 +65,7 @@ export class HomePage implements OnInit {
     private platform: Platform) {
 
     router.events.subscribe((val) => {
-      document.querySelectorAll('ion-modal').forEach((e) => e.remove())
+      // document.querySelectorAll('ion-modal').forEach((e) => e.remove())
     });
 
     {

src/app/pages/agenda/agenda.page.ts

@@ -26,6 +26,7 @@ import { NewEventPage } from './new-event/new-event.page';
 import { AuthService } from 'src/app/services/auth.service';
 import { User } from 'src/app/models/user.model';
 import { letProto } from 'rxjs-compat/operator/let';
+import { DateAdapter } from '@angular/material/core';
 
 @Component({
   selector: 'app-agenda',
@@ -158,7 +159,12 @@ export class AgendaPage implements OnInit {
     private router: Router,
     private alertController: AlertService,
     private sanitizer: DomSanitizer,
-    authService: AuthService) {
+    authService: AuthService,
+    private dateAdapter: DateAdapter<any>
+    ) {
+    this.dateAdapter.setLocale('es');
+
+    this.locale = 'pt'
 
     this.loggeduser = authService.ValidatedUser;
 

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

@@ -8,12 +8,23 @@ 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 { MatDatepickerModule } from '@angular/material/datepicker';
-import {MatInputModule} from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
 
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatMomentDateModule, MomentDateAdapter } from "@angular/material-moment-adapter";
 
+import {
+  NgxMatDatetimePickerModule, 
+  NgxMatNativeDateModule, 
+  NgxMatTimepickerModule 
+} from '@angular-material-components/datetime-picker';
+
+
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
 
 @NgModule({
   imports: [
@@ -25,7 +36,20 @@ import { MatMomentDateModule, MomentDateAdapter } from "@angular/material-moment
     MatDatepickerModule,
     MatInputModule,
     MatNativeDateModule,
-    
+    //
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    // 
+
+    NgxMatMomentModule,
+    // BrowserAnimationsModule,
+    // BrowserModule,
+    MatSelectModule,
+    //MatRadioModule,
+    //MatCheckboxModule,
+    MatButtonModule,
+    ReactiveFormsModule
   ],
   declarations: [NewEventPage],
   exports: [NewEventPage]

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

@@ -13,6 +13,18 @@
 <ion-content>
   <div class="main-content">
 
+    <!-- THIS -->
+    
+    <!-- <mat-form-field>
+      <input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date" [formControl]="dateControl"
+        [min]="minDate" [max]="maxDate" [disabled]="disabled">
+      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+      <ngx-mat-datetime-picker #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
+        [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]="touchUi"
+        [color]="color" [enableMeridian]="enableMeridian">
+      </ngx-mat-datetime-picker>
+    </mat-form-field> -->
+   
     <!-- <form class="form-inline">
       <div class="form-group">
         <div class="input-group">
@@ -102,7 +114,7 @@
           >
           </ion-datetime>
 
-          <input 
+          <!-- <input 
             class="d-none width-100"  
             placeholder="Início" 
             [matDatepicker]="picker" 
@@ -110,7 +122,7 @@
             (click)="picker.open()"
             [(ngModel)]="postEvent.StartDate"
           >
-          <mat-datepicker #picker></mat-datepicker>
+          <mat-datepicker #picker></mat-datepicker> -->
       
       
           <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->

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

@@ -21,21 +21,29 @@ import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/
 import * as _moment from 'moment';
 import * as _rollupMoment from 'moment';
 import {FormControl} from '@angular/forms';
+import { NgxMatDateFormats } from '@angular-material-components/datetime-picker';
+import { ThemePalette } from '@angular/material/core';
+
+
+import { HttpClient } from '@angular/common/http';
+import {  NgZone, ViewChild } from '@angular/core';
+import {  FormGroup, Validators } from '@angular/forms';
+import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NGX_MAT_DATE_FORMATS, NgxMatDateAdapter } from '@angular-material-components/datetime-picker';
 
 
 const moment = _rollupMoment || _moment;
 
-export const MY_FORMATS = {
+const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
   parse: {
-    dateInput: 'LL',
+    dateInput: "YYYY-MMMM-DD HH:mm"
   },
   display: {
-    dateInput: 'LL',
+    dateInput: "DD MMM YYYY H:mm",
-    monthYearLabel: 'MMM YYYY',
+    monthYearLabel: "MMM YYYY",
-    dateA11yLabel: 'LL',
+    dateA11yLabel: "LL",
-    monthYearA11yLabel: 'MMMM YYYY',
+    monthYearA11yLabel: "MMMM YYYY"
-  },
+  }
-};
+}
 
 @Component({
   selector: 'app-new-event',
@@ -45,13 +53,15 @@ export const MY_FORMATS = {
     // `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,
+    //   provide: DateAdapter,
-      useClass: MomentDateAdapter,
+    //   useClass: MomentDateAdapter,
-      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
+    //   deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
-    },
+    // },
 
-    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
+    { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
+    // { provide: MAT_DATE_LOCALE, useValue: 'pt-br' },
+    // { provide: LOCALE_ID, useValue: "en-GB" } 
   ]
 })
 
@@ -61,6 +71,20 @@ export class NewEventPage implements OnInit {
 
   eventBody: EventBody;
   segment:string = "true";
+
+  public date: any;
+  public disabled = false;
+  public showSpinners = true;
+  public showSeconds = false;
+  public touchUi = false;
+  public enableMeridian = false;
+  public minDate: any;
+  public maxDate: any;
+  public stepHour = 1;
+  public stepMinute = 1;
+  public stepSecond = 1;
+  public color: ThemePalette = 'primary';
+
   
   @Input() profile:string;
   @Input() selectedSegment: string;
@@ -80,12 +104,10 @@ export class NewEventPage implements OnInit {
 
   documents:SearchDocument[] = [];
 
-  minDate: string;
+  // minDate: string;
 
   loggeduser: User;
-
+  @ViewChild('picker') picker: any;
-  date = new FormControl(moment());
-  // serializedDate = new FormControl((new Date()).toISOString());
 
   constructor(
     private modalController: ModalController,
@@ -94,13 +116,17 @@ export class NewEventPage implements OnInit {
     private animationController: AnimationController,
     private toastService: ToastService,
     private userService: AuthService,
-
+    private http: HttpClient, 
+    private zone: NgZone,
+    private dateAdapter: DateAdapter<any>
   ) {
+    this.dateAdapter.setLocale('pt');
     this.loggeduser = userService.ValidatedUser;
   }
 
   ngOnInit() {
     
+    
     if(!this.restoreTemporaryData()){
       // clear
 
@@ -178,6 +204,61 @@ export class NewEventPage implements OnInit {
       this.setIntervenientCC.emit(this.taskParticipantsCc);
 
     }
+
+
+    this.date = new Date(2021,9,4,5,6,7);
+  }
+
+  
+  public formGroup = new FormGroup({
+    date: new FormControl(null, [Validators.required]),
+    date2: new FormControl(null, [Validators.required])
+  })
+  public dateControl = new FormControl(new Date(2021,9,4,5,6,7));
+  public dateControlMinMax = new FormControl(new Date());
+
+  public options = [
+    { value: true, label: 'True' },
+    { value: false, label: 'False' }
+  ];
+
+  public listColors = ['primary', 'accent', 'warn'];
+
+  public stepHours = [1, 2, 3, 4, 5];
+  public stepMinutes = [1, 5, 10, 15, 20, 25];
+  public stepSeconds = [1, 5, 10, 15, 20, 25];
+
+  toggleMinDate(evt: any) {
+    if (evt.checked) {
+      this._setMinDate();
+    } else {
+      this.minDate = null;
+    }
+  }
+
+  toggleMaxDate(evt: any) {
+    if (evt.checked) {
+      this._setMaxDate();
+    } else {
+      this.maxDate = null;
+    }
+  }
+
+  closePicker() {
+    this.picker.cancel();
+  }
+
+  private _setMinDate() {
+    const now = new Date();
+    this.minDate = new Date();
+    this.minDate.setDate(now.getDate() - 1);
+  }
+
+
+  private _setMaxDate() {
+    const now = new Date();
+    this.maxDate = new Date();
+    this.maxDate.setDate(now.getDate() + 1);
   }
 
   async getDoc(){
@@ -367,9 +448,4 @@ export class NewEventPage implements OnInit {
     window['temp.path:/home/agenda/new-event.component.ts'] = {}
   }
 
-
-
-
-
-
 }

src/global.scss

@@ -699,10 +699,10 @@ body, .blue-background{ background: #0782C9 !important;}
 @media only screen and (min-width: 1365px) {
 
     body{
-        background: linear-gradient(270deg, #45BAFF 0%, #0782C9 23.44%, rgba(7, 130, 201, 0.9425) 78.13%, #45BAFF 100%);
+        background: linear-gradient(270deg, #45BAFF 0%, #0782C9 23.44%, rgba(7, 130, 201, 0.9425) 78.13%, #45BAFF 100%) !important;
     }
     .blue-background {
-        background: linear-gradient(270deg, #45BAFF 0%, #0782C9 23.44%, rgba(7, 130, 201, 0.9425) 78.13%, #45BAFF 100%);
+        background: linear-gradient(270deg, #45BAFF 0%, #0782C9 23.44%, rgba(7, 130, 201, 0.9425) 78.13%, #45BAFF 100%) !important;
     }
 }