Allday feature added

This commit is contained in:
Eudes Inácio
2024-03-03 05:36:03 +01:00
parent d180e5d35e
commit 8af379bbe5
8 changed files with 406 additions and 35 deletions
@@ -124,6 +124,15 @@
</div>
<div class="container-div">
<div>
<ion-item>
<ion-label>Todo dia</ion-label>
<ion-checkbox [(ngModel)]="allDayCheck" (ionChange)="onCheckboxChange($event)"></ion-checkbox>
</ion-item>
</div>
</div>
<div *ngIf="allDayCheck" class="container-div">
<div class="ion-item-class-2 width-100 d-flex">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
@@ -135,7 +144,7 @@
[(ngModel)]="_postEvent.StartDate" [max]="maxDate" [disabled]="disabled">
<mat-datepicker-toggle id="new-inicio" matSuffix [for]="picker1"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #picker1 [showSpinners]="showSpinners" [showSeconds]="showSeconds"
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]="touchUi">
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]="touchUi" [hideTime]="true">
</ngx-mat-datetime-picker>
</mat-form-field>
@@ -143,7 +152,27 @@
</div>
</div>
<div class="container-div">
<div *ngIf="!allDayCheck" class="container-div">
<div class="ion-item-class-2 width-100 d-flex">
<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" [class.input-error]="Form?.get('Date')?.invalid && validateFrom ">
<mat-form-field appearance="none" floatLabel="never" class="date-hour-picker">
<input matInput [ngxMatDatetimePicker]="picker1" placeholder="Choose a date"
[(ngModel)]="_postEvent.StartDate" [max]="maxDate" [disabled]="disabled">
<mat-datepicker-toggle id="new-inicio" matSuffix [for]="picker1"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #picker1 [showSpinners]="showSpinners" [showSeconds]="showSeconds"
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]="touchUi" [hideTime]="false">
</ngx-mat-datetime-picker>
</mat-form-field>
</div>
</div>
</div>
<div *ngIf="allDayCheck" class="container-div">
<div class="ion-item-class-2 width-100 d-flex">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
@@ -155,7 +184,27 @@
[max]="maxDate" [disabled]="disabled" [min]="_postEvent.StartDate">
<mat-datepicker-toggle id="new-fim" matSuffix [for]="fim"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #fim [showSpinners]="showSpinners" [showSeconds]="showSeconds"
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond">
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [hideTime]="true">
</ngx-mat-datetime-picker>
</mat-form-field>
</div>
</div>
</div>
<div *ngIf="!allDayCheck" class="container-div">
<div class="ion-item-class-2 width-100 d-flex">
<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" [class.input-error]="Form?.get('Date')?.invalid && validateFrom ">
<mat-form-field appearance="none" floatLabel="never" floatLabel="never" class="date-hour-picker">
<input matInput [ngxMatDatetimePicker]="fim" placeholder="Choose a date" [(ngModel)]="_postEvent.EndDate"
[max]="maxDate" [disabled]="disabled" [min]="_postEvent.StartDate">
<mat-datepicker-toggle id="new-fim" matSuffix [for]="fim"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #fim [showSpinners]="showSpinners" [showSeconds]="showSeconds"
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [hideTime]="false">
</ngx-mat-datetime-picker>
</mat-form-field>