improve action on mobile

This commit is contained in:
Peter Maquiran
2023-08-30 14:39:27 +01:00
parent 1b9f5a25cb
commit 7ee834558c
3 changed files with 32 additions and 54 deletions
@@ -20,30 +20,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="d-block d-md-none"
[(ngModel)]="folder.DateBegin"
placeholder="Início"
displayFormat="D MMM YYYY H:mm"
minuteValues="0,5,10,15,20,25,30,35,40,45,50,55"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="{{minDate}}"
max="2025">
</ion-datetime>
<div class="ion-input-class flex-grow-1" [class.input-error]="Form?.get('Date')?.invalid && validateFrom ">
<mat-form-field appearance="none" class="width-100 date-hour-picker d-none d-md-block">
<mat-form-field appearance="none" class="width-100 date-hour-picker">
<input matInput [ngxMatDatetimePicker]="picker1"
placeholder="Choose a date*"
[formControl]="folder.DateBegin"
[disabled]="disabled"
[(ngModel)]="folder.DateBegin"
>
<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"
[stepHour]="1" [stepMinute]="12"
[stepSecond]="stepSecond"
[touchUi]="touchUi">
</ngx-mat-datetime-picker>
@@ -58,30 +46,19 @@
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class d-flex flex-grow-1">
<ion-datetime
class="flex-grow-1 d-block d-md-none"
[(ngModel)]="folder.DateEnd"
placeholder="Fim"
displayFormat="D MMM YYYY H:mm"
minuteValues="0,5,10,15,20,25,30,35,40,45,50,55"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="{{minDate}}"
max="2025">
</ion-datetime>
<div class="ion-input-class d-flex flex-grow-1" [class.input-error]="Form?.get('Date')?.invalid && validateFrom ">
<mat-form-field class="width-100 date-hour-picker d-none d-md-block">
<mat-form-field class="width-100 date-hour-picker">
<input matInput [ngxMatDatetimePicker]="fim"
placeholder="Choose a date*"
[formControl]="folder.DateEnd"
[(ngModel)]="folder.DateEnd"
[min]="maxDate"
[disabled]="disabled"
>
<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"
[stepHour]="1" [stepMinute]="15"
[stepSecond]="stepSecond"
[touchUi]="touchUi">
</ngx-mat-datetime-picker>