used mat-datepicker instead of mat-datetimepicker

This commit is contained in:
Jatin_Chugh
2023-06-07 10:46:00 +05:30
parent 14ab734d86
commit 21cbf7d46b
3 changed files with 24 additions and 19 deletions
@@ -33,27 +33,25 @@
class="adf-share-link__date-time-container">
<mat-form-field class="adf-full-width adf-float-label" floatLabel='always'>
<mat-label>{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}</mat-label>
<mat-datetimepicker-toggle
<mat-datepicker-toggle
[disabled]="time.disabled"
[for]="datetimePicker"
[for]="datePicker"
matSuffix
class="adf-share-link__icon adf-share-link__calender-icon">
</mat-datetimepicker-toggle>
<mat-datetimepicker
#datetimePicker
(closed)="onDatetimepickerClosed()"
[type]="type"
[timeInterval]="1">
</mat-datetimepicker>
</mat-datepicker-toggle>
<mat-datepicker
#datePicker
(closed)="onDatePickerClosed()">
</mat-datepicker>
<input
class="adf-share-link__input"
#dateTimePickerInput
#datePickerInput
matInput
placeholder="{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}"
[attr.aria-label]="'SHARE.EXPIRATION-LABEL' | translate"
[min]="minDate"
formControlName="time"
[matDatetimepicker]="datetimePicker" />
[matDatepicker]="datePicker" />
</mat-form-field>
</div>
<p class="adf-share-link__info adf-share-link__para">{{ 'SHARE.SHARE-LINK' | translate }}</p>
@@ -69,7 +67,10 @@
<div class="adf-share-link__label adf-sharable-link">{{ 'SHARE.SHARABLE-LINK-CREATED' | translate }}
</div>
</div>
<mat-form-field class="adf-full-width adf-float-label" floatLabel='always'>
<mat-form-field
class="adf-full-width adf-float-label"
floatLabel='always'
[ngClass]="isLinkWithExpiryDate? 'adf-share-link__border-color' : ''">
<input
#sharedLinkInput
data-automation-id="adf-share-link"
@@ -91,6 +91,10 @@
&__date-time-container {
padding-bottom: 8px;
}
&__border-color {
border: 1px solid var(--theme-warn-color);
}
}
.adf-input-action {
@@ -62,15 +62,15 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
sharedUrl: new UntypedFormControl(''),
time: new UntypedFormControl({value: '', disabled: true})
});
type: DatePickerType = 'datetime';
type: DatePickerType = 'date';
maxDebounceTime = 500;
isExpiryDateToggleChecked: boolean;
@ViewChild('slideToggleExpirationDate', {static: true})
slideToggleExpirationDate;
@ViewChild('dateTimePickerInput', {static: true})
dateTimePickerInput;
@ViewChild('datePickerInput', {static: true})
datePickerInput;
private onDestroy$ = new Subject<boolean>();
@@ -86,7 +86,7 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
}
ngOnInit() {
this.type = this.appConfigService.get<DatePickerType>('sharedLinkDateTimePickerType', 'datetime');
this.type = this.appConfigService.get<DatePickerType>('sharedLinkDateTimePickerType', 'date');
if (this.data.node && this.data.node.entry) {
this.fileName = this.data.node.entry.name;
@@ -156,8 +156,8 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
}
}
onDatetimepickerClosed() {
this.dateTimePickerInput.nativeElement.blur();
onDatePickerClosed() {
this.datePickerInput.nativeElement.blur();
if (!this.time.value) {
this.slideToggleExpirationDate.checked = false;
}
@@ -283,7 +283,7 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
let expiryDate: Date | string;
if (date) {
if (this.type === 'date') {
expiryDate = format(endOfDay(date as Date), `yyyy-MM-dd'T'HH:mm:ss.SSSxx`);
expiryDate = format(endOfDay(new Date(date)), `yyyy-MM-dd'T'HH:mm:ss.SSSxx`);
} else {
expiryDate = format((new Date(date)), `yyyy-MM-dd'T'HH:mm:ss.SSSxx`);
}