如何改变datePicker的背景色？

Question

关于DatePicker，我有两个简短的问题：

1. 如何在CSS中更改datePicker的背景色？例如，我想把绿色改为蓝色吗？

数据采集图像

(关于信息，我不能使用JS)

1. 如何在输入的右边添加一个“日历”图标？

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

下面是一个表示这里

谢谢

Answer 1

对于数据采集器的样式，您可以这样做。

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

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

对于图标，您需要将其添加到html中，而不是将其样式化。

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

下面是演示https://stackoverflow-51062003-6khnoa.stackblitz.io