'PrimeNG calendar clear current/today date when the user selects some other date on the calendar

I'm using p-calendar in my app to take input from the user for a particular time. The calendar works fine. However even when I click on some other date on the calendar, the current date also remains selected in the calendar. So even though the new date has been selected, it looks like as if both are selected. How can I fix this? Thanks in advance for your help.

Here is my template:

<div class="p-field p-col-12 p-md-4">

    <p-calendar [defaultDate]="null" [showButtonBar]="true" [maxDate]="maxDateValue" [readonlyInput]="true" [(ngModel)]="date7" [showTime]="true" [inline]="true" inputId="time"></p-calendar>
</div>

<span style="font-size: small;"> Selcted Time::</span><span style="font-size: small;"><u>{{date7}}</u></span>

The value in date7 is the newly selected date which is as expected however the calendar shows both dates as selected.

htmlcssangularprimengprimeng-calendar


Solution 1:[1]

By default, today's date in PrimeNG calendar has a gray background color (different from the one for a selected date) to help the user to locate himself in the calendar.

If you want to remove it, you can override PrimeNG 10 CSS:

::ng-deep .p-datepicker table td.p-datepicker-today > span {
  background-color: transparent;
}

or PrimeNG 9 CSS:

::ng-deep body .ui-datepicker table td.ui-datepicker-today > a {
  background-color: transparent;
}

See PrimeNG 10 demo or PrimeNG 9 demo

Solution 2:[2]

If you still want the current date to be able de to be highlighted when selected:

:host ::ng-deep
  .p-datepicker
  table
  td.p-datepicker-today
  > :not(span.p-highlight) {
  background-color: transparent;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Théophile Wallez

Related Questions