When a user chooses a different date on the PrimeNG calendar, the current/today date will be automatically cleared

I have integrated the p-calendar component into my application to allow users to input a specific time. The calendar functions properly, but I am encountering an issue where when I select a new date on the calendar, the previous date remains selected as well. This gives the appearance that both dates are selected simultaneously. How can I resolve this problem? Thank you for any assistance you can provide.

Below is the code snippet from 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;"> Selected Time::</span><span style="font-size: small;"><u>{{date7}}</u></span>

The value in the variable date7 corresponds to the newly selected date, as it should. However, the issue persists with both dates appearing selected on the calendar display.

htmlcssangularprimengprimeng-calendar

Answer №1

The default styling of the today's date in PrimeNG calendar includes a gray background color to help users orient themselves within the calendar.

If you wish to remove this styling, you can customize it by overriding the CSS for PrimeNG 10:

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

or for PrimeNG 9:

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

For examples, you can check out the PrimeNG 10 demo or PrimeNG 9 demo

Answer №2

To ensure that the current date remains highlighted when selected, you can use the following CSS code:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Paste the URL into your clipboard without relying on JavaScript

Is there a way to implement a copy to clipboard function for email templates without relying on JavaScript? ...

htmlcss

Icons in CSS are overlapping to create a stacked effect

Currently in the process of designing some stack icons, I've come across several discussions that suggest the following approach - i { position: relative; } i:before { content: "\f099"; position: absolute; ...

htmlcss

Utilizing jQuery/Javascript to replicate the data from a table while excluding the header and then pasting it to the

I am attempting to replicate the data from a table while disregarding the header/title row and copying it to the clipboard in the exact same way as manual selection and copy. I came across a post on how to choose Select a complete table with Javascript (t ...

javascriptjqueryhtmlhtml-table

Showcasing Wordpress blog entries on another webpage

Struggling with understanding how to showcase posts from a Wordpress blog on a website? You're not alone. Imagine you have a website www.site.com and a blog structured in Wordpress located at www.site.com/blog. Your task is to feature the recent post ...

phphtmlwordpress

How can I create a more spacious and stylish JTextField for my address bar?

I am working on developing my Java skills by creating a custom browser. Is there a way to adjust the size and shape of the address bar, which is currently implemented as a JTextField with Swing's default settings? Here is the code snippet I am using: ...

javajavascriptcssswingjframe

What's preventing my Angular list from appearing?

I am currently developing an Angular project that integrates Web API and entity framework code first. One of the views in my project features a table at the bottom, which is supposed to load data from the database upon view loading. After setting breakpoin ...

javascripthtmlangularjs

Creating regex to detect the presence of Donorbox EmbedForm in a web page

I am working on creating a Regex rule to validate if a value matches a Donorbox Embed Form. This validation is important to confirm that the user input codes are indeed from Donorbox. Here is an example of a Donorbox EmbedForm: <script src="https: ...

javascriptregexangulartypescriptangular9

Deciding on number style preferences in HTML/CSS (Choosing Between Uppercase and Lowercase Numbers)

Is it possible to leverage HTML/CSS to implement a font that automatically displays numbers in uppercase rather than lowercase? I'm faced with the challenge of managing client content which means I can't manually wrap all numbers in spans for sty ...

htmlcsstypography

Steps to generate a new page when submitting a form:

When a form is submitted, I am aiming to generate a fresh page each time. This new page will serve as an order status tracker that will be updated regularly. Essentially, my goal is for users to see a confirmation page for the form submission and have acce ...

javascriptphphtmlforms

Incorporating a background image into a Material UI theme with CSS styling

When customizing a theme in material UI, one can adjust or override it using the function createMuiTheme. Below is the complete file where this process is carried out: import { createMuiTheme } from '@material-ui/core/styles'; import purple from ...

cssreactjsmaterial-uibackground-imagetypeerror

Concerns about unchanging Behavior Subject affecting Ionic 4 interface

I have created a list program using Ionic 4 and attempted to update the list by utilizing BehaviorSubject from rxjs. The list updates properly when initialized in the ngOnInit() method, but fails to update within the add() callback. Despite logging the ou ...

angularionic-frameworkrxjsionic4

A guide on adjusting the height of UI elements in Semantic: steps for modifying

One of my current challenges involves using Semantic UI and embedding it within an iFrame tag to display a video. However, I am struggling to adjust the height of the Semantic UI element. <div className="video_box ui embed"> ...

cssreactjsuser-interfaceheightsemantic-ui

Problem with Express Server related to MIME type ('text/html') is occuring

Recently, I started learning about Express server module in my school. To practice, I created a simple website but encountered an issue with the CSS file not being executed (checked using Chrome's terminal). Refused to apply style from 'http://l ...

javascripthtmlcssexpress

Requesting the user to repeatedly input their birth year until it is less than the current year

Can anyone help me figure out how to display a prompt until the user enters a birth year that is less than the current year? I've tried using a loop in my code, but I'm having trouble getting it right. Any assistance would be greatly appreciated. ...

javascripthtmlprompt

Guidelines for placing an HTML element in relation to another HTML element using CSS or JavaScript

Is there a way to position an HTML element in relation to another using CSS or JavaScript? I have attempted to copy the inner HTML of the "second-element" and append it inside the "first-element", but this approach is causing issues with other functional ...

javascripthtmlcsspositioncss-position

Converting HTML tags into arrays using PHP

Is it feasible to convert HTML tags into an array? <title>aa</title> <link>http://dailynews.yahoo.co.jp/fc/domestic/nuke_disaster_prevention/?id=6170385</link> <pubDate>Wed, 12 Aug 2015 17:14:19 +0900</pubDate> ...

phphtmlarrays

The overflow property is set to scroll in jQuery, causing continuous scrolling until reaching a certain point, at which it

Continuously adding new chat messages will show the latest one, but eventually it stops scrolling down automatically. How do I resolve this issue? Thank you. http://jsfiddle.net/VMcsU/ $("#button1").click(function(){ $("<div>").html("text").app ...

javascriptjqueryhtmlcss

Python: Automate clicking on checkboxes with Selenium

Recently, I've encountered a problem and I'm in search of an answer. Below is some HTML code that I need to work with. My goal is to send a snippet of this HTML to selenium so that it can click on a checkbox. However, I don't want to use the ...

pythonhtmlselenium

Guide on connecting ngrx/store to an angular router guard

As someone who is new to ngrx/store, I am embarking on my initial project utilizing this tool. After successfully setting up my angular project with ngrx/store, I discovered how to dispatch a load action following the initialization of my main component: ...

angularangular2-routingngrxngrx-effects

Performing sequential HTTP requests on an array using Angular 4 and RxJS

Looking to perform sequential HTTP posts for each item in an array, using RxJS flatMap without success. Essentially, I'm trying to achieve the following: Each item from the 'items' array should be sent through HTTP post one by one. thi ...

angularrxjsflatmap