fix: datepicker skeleton not showing up (#2984)

Author: eduardmarcinco

src/datepicker-input/datepicker-input.component.ts

@@ -22,23 +22,28 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 				'cds--skeleton' : skeleton
 			}">
 			<div class="cds--date-picker-container">
+				<!-- Skeleton structure -->
+				<ng-container *ngIf="skeleton">
+					<span class="cds--label cds--skeleton"></span>
+					<div class="cds--date-picker__input cds--skeleton"></div>
+				</ng-container>
 				<label
-					*ngIf="label"
+					*ngIf="label && !skeleton"
 					[for]="id"
 					class="cds--label"
 					[ngClass]="{'cds--label--disabled': disabled}">
 					<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
 					<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
 				</label>
 				<div class="cds--date-picker-input__wrapper"
+					*ngIf="!skeleton"
 					[ngClass]="{
 						'cds--date-picker-input__wrapper--invalid': invalid,
 						'cds--date-picker-input__wrapper--warn': warn
 					}">
 					<span>
 						<input
 						#input
-						*ngIf="!skeleton"
 						autocomplete="off"
 						type="text"
 						class="cds--date-picker__input"

src/datepicker/datepicker.component.ts

@@ -452,7 +452,7 @@ export class DatePicker implements
 	 * Handles opening the calendar "properly" when the calendar icon is clicked.
 	 */
 	openCalendar(datepickerInput: DatePickerInput) {
-		if (this.readonly) {
+		if (this.readonly || this.skeleton) {
 			return;
 		}