1

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.

Antikhippe
  • 6,316
  • 2
  • 28
  • 43
wazza
  • 173
  • 5
  • 15

2 Answers2

0

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

Antikhippe
  • 6,316
  • 2
  • 28
  • 43
0

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;
}
Théophile Wallez
  • 451
  • 3
  • 15