How can I modify the background color of the datePicker?

I have a couple of inquiries about customizing the DatePicker:

  1. Is there a way to modify the background color of the datePicker using CSS? For instance, I would like to change the current green color to blue.

Link to datepicker image

(Just to note, JS cannot be used in this scenario)

  1. How can I add a "calendar" icon to the right side of the input field?

HTML

<div class="container">
  <input
    type="text"
    #dp="bsDatepicker"
    bsDatepicker
    [(bsValue)]="myDateValue"
  />
</div>

CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 50px;
}

::ng-deep.bs-datepicker {
  height: 350px;
}

.custom-content {
  position: absolute;
  z-index: 1081;
  top: 390px;
  cursor: pointer;
  align-self: center;
}

For a live example, you can view it here

Thank you

css

Answer №1

To customize the appearance of the datepicker, you can use the following CSS:


::ng-deep.bs-datepicker .bs-datepicker-head{
  background-color: blue !important;
}

::ng-deep.bs-datepicker .selected{
  background-color: blue !important;
}

For styling the icon, add it to the HTML and apply styles accordingly:


<div class="inputContainer">
    <input
      type="text"
      #dp="bsDatepicker"
      bsDatepicker
      [(bsValue)]="myDateValue"
    />
    <span class="inputIcon">
      <img
        src="https://www.svgrepo.com/show/7168/calendar.svg"
      >
    </span>
  </div>


::ng-deep.bs-datepicker .bs-datepicker-head{
  background-color: blue !important;
}

::ng-deep.bs-datepicker .selected{
  background-color: blue !important;
}

Check out the demo here

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 are the steps to generate a production build directory in a React project?

Currently, I am developing a website utilizing react for the frontend and node.js for the backend. However, I'm unsure of how to deploy it to the live server. After conducting some research, I learned that I need to create a build folder. To provide a ...

htmlcssnode.jssql-serverreactjs

What is the best way to set the text color of cell data in a mat-table to white for the entire row when the row is selected as

Is there a way to change the text color when a row is selected in my application? I have already figured out how to change the background color of the row, but how can I target the text within the cells? I'm considering using a similar approach to th ...

cssangular

Position child divs at the center of the parent div

I am struggling to center 3 child divs inside a parent div that must remain at a width of 100%. Can someone help me figure out how to achieve this? .parent { width: 100%; border: 1px solid blue; } .child { float: left; borde ...

htmlcss

Accordion Box glitch detected in Firefox browser

I have been working on a JavaScript function that controls a slide up/down box. However, I've encountered some issues with Firefox as the box only opens and closes once before failing to work properly again. Upon further investigation, it seems that F ...

javascriptjqueryhtmlcss

Tips for altering the background of a video on Vonage

Hello everyone, Currently, I am incorporating the Vonage API for video calling into my project. I would like to tweak the video background - does anyone have any ideas on how to accomplish this? I eagerly await your responses! Thank you in advance! ...

javascriptcssvonage

Decrease the height of h1 by using the display property set to table-cell

I managed to center text inside a table cell using display: table-cell, vertical-align: middle, and text-align: center. However, I'm experiencing unwanted spacing above and below the text. How can I completely eliminate it? I want zero margin/padding ...

htmlcsscellspacing

PHP persistent forms dropdowns and checkbox selection

I am currently working on a PHP form and I am facing an issue with the drop-down boxes and checkboxes. I want them to stay filled even if I don't select something, maintaining the previously entered details while leaving the unfilled parts empty. I ha ...

phphtmlcssformssticky

Using CSS to disable an image map in conjunction with dynamically adjusting CSS styling

On the desktop version of the website, there is an imagemap implemented. However, when the site transitions into tablet or mobile view, the imagemap should be disabled to allow for a simpler navigation area to be displayed. I attempted to use the following ...

htmlcssdynamicimagemap

reveal one div and conceal another using Bootstrap's collapse feature

I'm not sure why it's not working. Maybe I missed some simple thing? I want to show one div when I use an icon, then hide the other div. Currently, if I click on the first icon, a div will show. But if I click on the second icon, the div will sh ...

htmlcsstwitter-bootstrap

Utilizing loop variables in ng-class and ng-click directive

This piece of code generates a list consisting of seven thumbnails, with the currently active image designated by the active and thumb classes. <div ng-repeat="no in [1, 2, 3, 4, 5, 6, 7]"> <img ng-src="images/{{no}}t.jpg" class="thumb" ng ...

javascriptcssangularjs

Picture goes missing from slideshow

I am currently using a CSS + Javascript slideshow on my website, inspired by an example from the W3Schools website. Here is the code I have adapted for my web application: $(document).ready(function() { var slideIndex = 1; function showSlides(n) { ...

javascriptjqueryhtmlcssslideshow

Can CSS3 animations be executed sequentially for each child element?

Have you ever tried creating a CSS3 animation in HTML? You can check out an example here. <div class="parent"> <a href="#">First</a> <a href="#">Second</a> <a href="#">Third</a> </div> With the ...

cssanimationcss-transitions

Tips for transitioning the li class from active to none

Struggling with changing the li class (of Home) from 'active' to none (or another class) when clicking on the profile tab, and then changing the li class (of Profile) from none to 'active' when the profile is activated. Snippet of my c ...

javascriptc#jquerycssasp.net

Is there a way to modify the rounded corners of a checkbox in material-ui?

After importing material-ui into my react app, I was able to change the color and size of a checkbox as shown. However, I am having trouble changing the icon's border radius. How can I achieve this? import FormGroup from '@mui/materi ...

cssreactjscheckboxmaterial-ui

Switch up the appearance of a document by manipulating the stylesheet using a select tag

I'm currently facing an issue with the implementation of a drop-down box on my website for selecting different themes. Despite having the necessary javascript code, I am unable to get it working correctly. Here's the snippet: //selecting the sele ...

javascripthtmlcss

Implementing a JavaScript/CSS popup element within a PHP document

I recently attempted to add a popup div to my front page by following instructions from this guide Given that I am not well-versed in coding, I found it challenging to implement the code into my PHP file (which is for a WordPress site). Uncertain about wh ...

javascriptphphtmlcsspopup

What is the process for creating a hover effect on a button that is triggered when a user hovers over the button's parent container?

Visit this link to view the code My Goal: I want the hover effect that normally applies to buttons when hovered over, to instead be applied when a user hovers over the parent div containing those buttons. The parent divs in question have a class of "ser ...

jquerycss

Ways to adjust the size of div and its elements to fit the window dimensions

When resizing the window, the banner image shrinks while the header and header items remain the same size. However, there is an issue when the header takes up around 30% of the screen in phone view. Here is the CSS code I am using: .headerdiv{ width: ...

javascripthtmlcssflexbox

What is the best way to adjust inline svg to the user viewport size?

After working on integrating my interactive SVG maps into my HTML pages, I encountered a minor issue: when inserting my inline SVG into a standard, non-responsive HTML document, it automatically adjusts itself to fit nicely within the user's viewport. ...

htmlcsstwitter-bootstrapsvgsnap.svg

Center column with header and footer flanking each side

Trying to replicate the layout of the Facebook Android app on my page. The app features a 3 column design, with the central column exclusively displaying the header (no footer included, although I require one for my version). This visual representation is ...

javascriptjqueryhtmlcss