Tips for customizing the dp-material CSS in ng2-date-picker

I am currently utilizing the ng2-date-picker node modules, as well as using a "dp-material" theme for these components. I am interested in how to override the CSS for the date picker components. I have attempted the following CSS without success:

dp-date-picker {
    color: #000;
    &.dp-material{
      &.dp-day-calendar{
        color:red;
      }
    }
  }

Answer №1

Back in the day, I used to customize a date picker (ng2-date-picker) and other CSS styles from modules that were difficult to modify:

In my *.ts file:

constructor(private elRef: ElementRef) {}

customizeButtonColor() {

  var header = this.elRef.nativeElement.querySelector('.dp-nav-header');
 if (header) {
  header.style.color = "#c8960f";
} 

  var current = this.elRef.nativeElement.querySelector('.dp-current-month');
 if (current) {
  current.style.border = "1px solid #c8960f";
} 

var selected = this.elRef.nativeElement.querySelector('.dp-selected');
if (selected) {
  selected.style.background = "#c8960f";
    } 

  }

In the template:

<dp-date-picker (click)="customizeButtonColor()" theme="dp-material" mode="month" [(ngModel)]="selectedDate" placeholder="Choose a month" [config]="datePickerConfig"></dp-date-picker>  

If anyone has a cleaner solution, I would love to hear it!

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

What is the best way to animate my logo using JavaScript so that it scales smoothly just like an image logo

I dedicated a significant amount of time to create a unique and eye-catching logo animation for my website! The logo animation I designed perfectly matches the size of the logo image and can be seamlessly integrated into the site. The issue arises when th ...

Ways to solve the issue of hidden overflow in a bootstrap dropdown menu

I have been working diligently on a project that includes a navbar. Utilizing the Bootstrap library for styling, I enhanced my navbar with a frosted glass effect to elevate its visual appeal. However, upon adding this effect, I encountered an issue where t ...

The art of spinning in CSS

Can anyone help me figure out how to make an animation in CSS stay at its last frame instead of reverting back to the beginning? The <i>animation-fill-mode: forwards;</i> property doesn't seem to be doing the trick. Is there a workaround ...

The box shadow does not envelop the entire block uniformly

I have been struggling to evenly cover the shadows around all the blocks using CSS. Unfortunately, after working on it for 2 days, I still haven't been able to find a solution. The middle line seems to be misaligned and thicker compared to the others. ...

Tips on removing the default validation tooltip that appears after calling .reportValidity() with CSS

Is there a way to eliminate the standard validation tooltip that appears after using .reportValidity() through CSS? Check out this image for more information on the validation tooltip message Open to any suggestions or solutions! ...

problem of underlining links in bootstrap

Recently, I integrated a template into my ASP.Net MVC project and added all the required files to it. I made sure to include all the necessary calls to format files (CSS) in the layout file while removing any references to default styling files. However, ...

What is the process for incorporating icons and choices into the header bar?

Seeking advice on how to incorporate an icon into the right side alignment of a simple blank header on my webpage, similar to the image provided. I have searched through numerous threads on StackOverflow without finding a suitable solution. Could someone s ...

Error with jquery.mobile-1.4.5.min.css in Android webview following recent Marshmallow update has caused compatibility issue

Creating a web page using JQuery was successful and the page loaded correctly on an Android device (Nexus 5) through WebView. However, after updating the Nexus 5 to Android Marshmallow, the web page could no longer be viewed properly on the WebView. Inste ...

A Pair of Crossfading Images Positioned Adjacently and Responsively

I am in the process of developing a new website where I have implemented two crossfading images placed side by side within separate div elements. While these crossfading images work flawlessly on a full-screen display, they do not adjust when the browser ...

Adjust Navbar Header Color Based on Screen Size

I am completely new to front-end development. I am in the process of building my own responsive website using Bootstrap 3. One issue I am facing is that when I resize my browser window to simulate a phone screen, I want the navigation bar color to change ...

Customizing Column Background Color with AngularJS

https://i.sstatic.net/OHFFF.png My current webapp highlights the day of the week on a table for the current day and the day two weeks from now. However, I'm facing an issue with adjusting the highlight if either of these days falls on a holiday. Curr ...

Is it possible to apply a CSS Transition to just one specific type of transform?

Can you animate just one type of css transform using transitions? My css looks like this: cell{ transform: scale(2) translate(100px, 200px); transition: All 0.25s; } Now I only want to animate the scale property. I could use position:absolute with ...

Adaptable design tailored for smartphones

When it comes to developing mobile websites for various platforms such as iPhone 3 and 4, Android, Blackberry Torch, etc., I usually find myself needing to slice images based on the specific platform. The challenge arises from constantly having to slice im ...

The entire framework remains concealed as the anchor component becomes immeasurable

Within a fixed-width paragraph, I have an anchor tag. The CSS for the p tag includes the properties text-overflow: ellipsis and overflow:hidden. However, when the anchor tag's content overflows (e.g., it contains a long string), the right outline is n ...

Tips for positioning a div next to an input box when it is in focus

I am working on a scenario where I have used CSS to extend the search box when focused. The idea is that when the search box is focused, it should decrease in size and a cancel button should appear next to it. This is the CSS code I am using: .clrble .fr ...

Tips for choosing an option from a list of options using Selenium with Python

Attempting to select an option from a webpage using Selenium-Python has proven challenging. Despite obtaining the xpath and css selector of the element, all attempts to locate it for clicking have failed. Research indicates that the element may be within a ...

Arranging buttons that are generated dynamically in a vertical alignment

Currently, I am in the process of creating a webpage for various items, and everything is going well so far. However, I have encountered an issue while attempting to vertically align the buttons that I am generating using JavaScript within the document. I ...

What causes the CSS Position Fixed Property to fail?

Can someone help me fix my navbar so that it remains fixed when I scroll? Currently, it moves up as I scroll down. Below are the source codes I'm using: * { margin: 0; padding: 0; box-sizing: border-box; } h1 { margin: 1rem; } ul { posit ...

Locate a list item within an unordered list and proceed with a comparison

Looking for a way to target an li within a specific ul that has a data-rank higher than the others, and apply different styling to it in comparison to its sibling li. Is there a smart approach to achieve this using regular CSS or styled components? <ul ...

Maintaining the scrolling behavior and preserving added class even after refreshing the page

I am facing an issue with an element on my page that adds a class when the user scrolls past a certain point and removes it when scrolling back up. The problem arises when I refresh the page after the class has been added, it doesn't persist until I s ...