How to change background color of datePicker?-CodePudding

I have two quick questions regarding the DatePicker:

How can I change the background color of the datePicker in CSS? For example, I want to change the green color to blue?

(for information, I can't use JS)

How to add a "calendar" icon to the right of the input?

HTML

<div >
  <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;
}

Here is a representation here

Thanks

CodePudding user response：

For the styling of the datepicker you do so by


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

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

for the icon you need to add it on the html and than style it .


<div  >
    <input
      type="text"
      #dp="bsDatepicker"
      bsDatepicker
      [(bsValue)]="myDateValue"
    />
    <span >
      <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;
}

Here is the demo https://stackoverflow-51062003-6khnoa.stackblitz.io