In my situation, I am trying to adjust the position of the date-picker in relation to a panel displayed within a <p-calendar> element. Due to a splitter on the right side, I need to shift the date-picker towards the left.
Here is the HTML code:
<div class="col-12">
<div class="p-grid">
<div class="col-6 mt-5" style="margin-left:-2%;">
<div class="form-input p-float-label">
<p-calendar inputId="fromDate" dateFormat="dd/mm/yy" [showTime]="true"
[maxDate]="form.get('toDate').value" [readonlyInput]="true" [monthNavigator]="true"
[yearNavigator]="true" yearRange="2020:{{ currentYear }}" [locale]="locale"
formControlName="fromDate">
</p-calendar>
<label for="fromDate">{{ 'devices.general.from' | translate }}</label>
</div>
</div>
<div class="col-6 mt-5 mb-4">
<div class="form-input p-float-label">
<p-calendar inputId="toDate" dateFormat="dd/mm/yy" [showTime]="true" class="moveToLeft"
[minDate]="form.get('fromDate').value" [readonlyInput]="true" [monthNavigator]="true"
[yearNavigator]="true" yearRange="2020:{{ currentYear }}" [locale]="locale" formControlName="toDate">
</p-calendar>
<label for="toDate">{{ 'devices.general.to' | translate }}</label>
</div>
</div>
</div>
</div>
I attempted to use a class="moveToLeft" to address this issue, but unfortunately, it was not successful.
Upon inspecting with F12, I noticed that the left property required modification:
<div class="ng-trigger ng-trigger-overlayAnimation ng-tns-c194-50 p-datepicker p-component ng-star-inserted" ng-reflect-ng-class="[object Object]" pr_id_13="" style="z-index: 1001; transform-origin: center top; top: 32px; left: 0px;">
<div class="p-datepicker-group-container ng-tns-c194-50 ng-star-inserted" style="">
<div class="p-datepicker-group ng-tns-c194-50 ng-star-inserted">
<div class="p-datepicker-header ng-tns-c194-50"><button type="button" pripple="" class="p-ripple p-element p-datepicker-prev p-link ng-tns-c194-50 ng-star-inserted">
The reference pr_id_13 corresponds to the "To" <p-calendar>.
Lastly, my attempt in CSS to resolve this matter applied changes to both date-pickers which was not intended:
:host ::ng-deep .p-datepicker{
left: -188px !important;
}