new inputs

2026-04-18 20:47:54 +00:00 · 2021-06-21 14:29:49 +01:00
parent 7682961a3a
commit 74ab4ce797
8 changed files with 119 additions and 96 deletions
@@ -14,16 +14,7 @@
  <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">
@@ -65,14 +56,18 @@
          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
        </div>
        <div class="ion-input-class flex-grow-1">
-          <ion-select  placeholder="Selecione agenda"
-          selectedText="{{postEvent.CalendarName}}" 
-          [(ngModel)]="postEvent.CalendarName" 
-          interface="action-sheet" Cancel-text="Cancelar" 
-          required>
-            <ion-select-option value="Oficial">Oficial</ion-select-option>
-            <ion-select-option value="Pessoal">Pessoal</ion-select-option>
-          </ion-select>
+
+          <mat-form-field  class="width-100"  [(ngModel)]="postEvent.CalendarName" placeholder="Selecione agenda" required>
+            <mat-select>
+              <mat-option value="Oficial">
+                Oficial
+              </mat-option>
+              <mat-option value="Pessoal">
+                Pessoal
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
        </div>
      </div>
    </div>
@@ -83,15 +78,24 @@
          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
        </div>
        <div class="ion-input-class flex-grow-1">
-          <ion-select  placeholder="Selecione tipo" 
-          [(ngModel)]="postEvent.Categories[0]" 
-          interface="action-sheet" 
-          Cancel-text="Cancelar" required>
-            <ion-select-option value="Reunião">Reunião</ion-select-option>
-            <ion-select-option value="Viagem">Viagem</ion-select-option>
-            <ion-select-option value="Conferência">Conferência</ion-select-option>
-            <ion-select-option value="Encontro">Encontro</ion-select-option>
-          </ion-select>
+
+          <mat-form-field  class="width-100"  [(ngModel)]="postEvent.Categories[0]" placeholder="Selecione tipo" required>
+            <mat-select>
+              <mat-option value="Reunião">
+                Reunião
+              </mat-option>
+              <mat-option value="Viagem">
+                Viagem
+              </mat-option>
+              <mat-option value="Conferência">
+                Conferência
+              </mat-option>
+              <mat-option value="Encontro">
+                Encontro
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
        </div>
      </div>
    </div>
@@ -101,31 +105,18 @@
        <div class="ion-icon-class">
          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
        </div>
-        <div class="ion-input-class flex-grow-1">
-          <ion-datetime 
-            class=""
-            placeholder="Início"
-            [(ngModel)]="postEvent.StartDate"
-            displayFormat="D MMM YYYY H:mm"
-            minuteValues="0,15,30,45"
-            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-            min="2018" 
-            max="2022" 
-          >
-          </ion-datetime>
+        <div (click)="openInicio()" class="ion-input-class flex-grow-1">
+          <mat-form-field class="date-hour-picker width-100">
+            <input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date" [formControl]="dateControl"
+            [(ngModel)]="postEvent.StartDate" 
+              [min]="minDate" [max]="maxDate" [disabled]="disabled">
+            <mat-datepicker-toggle id="new-inicio" #inicio  matSuffix [for]="picker"></mat-datepicker-toggle>
+            <ngx-mat-datetime-picker  #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
+              [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]=false 
+              [color]="'#0000'" [enableMeridian]="enableMeridian">
+            </ngx-mat-datetime-picker>
+          </mat-form-field>

-          <!-- <input 
-            class="d-none 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>
    </div>
@@ -135,18 +126,18 @@
        <div class="ion-icon-class">
          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
        </div>
-        <div class="ion-input-class flex-grow-1">
-          <ion-datetime 
-            placeholder="Fim"
-            [(ngModel)]="postEvent.EndDate"
-            displayFormat="D MMM YYYY H:mm"
-            minuteValues="0,15,30,45"
-            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-            min="2018" 
-            max="2022" 
-          >
-          </ion-datetime>
-          <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
+        <div (click)="openFim()" class="ion-input-class flex-grow-1">
+          <mat-form-field class="date-hour-picker width-100">
+            <input matInput [ngxMatDatetimePicker]="fim" placeholder="Choose a date" [formControl]="dateControl" 
+              [(ngModel)]="postEvent.EndDate"
+              [min]="minDate" [max]="maxDate" [disabled]="disabled">
+            <mat-datepicker-toggle id="new-fim" #inicio  matSuffix [for]="fim"></mat-datepicker-toggle>
+            <ngx-mat-datetime-picker [showSpinners]=false  #fim [showSpinners]="showSpinners" [showSeconds]="showSeconds"
+              [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]=false appearance = "standard"
+              [color]="'#0000'" [enableMeridian]="enableMeridian">
+            </ngx-mat-datetime-picker>
+          </mat-form-field>
+
        </div>
      </div>
    </div>
@@ -157,10 +148,18 @@
          <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
        </div>
        <div class="ion-input-class flex-grow-1">
-          <ion-select placeholder="Selecione repetição" value="false" interface="action-sheet" Cancel-text="Cancelar" required>
-            <ion-select-option value="false">Não se repete</ion-select-option>
-            <ion-select-option value="true">Repete</ion-select-option>
-          </ion-select>
+
+          <mat-form-field  class="width-100" placeholder="Selecione repetição" value="false" interface="action-sheet" Cancel-text="Cancelar" required>
+            <mat-select>
+              <mat-option value="false">
+                Não se repete
+              </mat-option>
+              <mat-option value="true">
+                Repete
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
        </div>
      </div>
    </div>