如何在 Materialise 设计中更改日期选择器表单的背景颜色答案

【问题标题】：How to change background color of datepicker form in Materialize design如何在 Materialise 设计中更改日期选择器表单的背景颜色
【发布时间】：2016-07-05 05:57:42
【问题描述】：

我在物化设计中使用日期选择器。但我想改变打开日期选择器的颜色。

屏幕截图。

 $('.datepicker').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15 // Creates a dropdown of 15 years to control year
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
 
 <div class="container">
   <div class="row">
     <div class="col s6 m6 l6">
        SELECT DATE

       <input type="date" class="datepicker">
     </div>
   </div>
 </div>

我看到了一个链接，但我无法解决这个问题。 How to change the cell color of a jquery datepicker

JSFIDDLE：
https://jsfiddle.net/varunPes/6smvtLxt/

【问题讨论】：

标签： javascript jquery html datepicker materialize

【解决方案1】：

使用 css 你可以改变日期选择器的颜色：

试试：

https://jsfiddle.net/ncrmyt6n/

.picker__date-display {
  background-color:blue;
}
.picker__weekday-display {
  background-color:red;
}
.picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected {
  background-color:blue;
}

【讨论】：

【解决方案2】：

实际上，如果您想更改日期时间选择器的颜色，代码如下：

.datepicker-date-display {
    background-color: #607d8b
}

.datepicker-day-button:focus {
    color: white !important;
    background-color: #a2b0b6
}

.datepicker-done,
.datepicker-cancel,
.select-dropdown li>span,
.is-today {
    color: #607d8b !important
}

td.is-selected,
.month-prev:active,
.month-prev:focus,
.month-next:active,
.month-next:focus {
    background-color: #607d8b !important
}

td.is-selected.is-today {
    color: white !important
}

datetime pic

但是，如果您也想更改时间选择器，代码如下：

.timepicker-digital-display {
    background-color: #607d8b
}

.timepicker-close {
    color: #607d8b
}

.timepicker-canvas-bg,
.timepicker-canvas-bearing {
    fill: #607d8b !important
}

.timepicker-canvas line {
    stroke: #607d8b
}

.timepicker-tick:hover {
    background-color: #a2b0b6
}

timepicker pic

【讨论】：

如果您使用的是materialize 1.0.0，其他答案是旧的，这是正确的答案。谢谢你。

【解决方案3】：

.datepicker-date-display {
    background: red;
}
.datepicker-calendar-container {
    color: blue;
}
.is-today {
    color: orange !important;

}
.datepicker-table td.is-selected {
    background: gray !important;
}
.datepicker-cancel, .datepicker-done {
    color: silver;
}

【讨论】：

【解决方案4】：

您可以覆盖 Materialize.css 的 CSS，将这些行添加到您的自定义 CSS 文件中

.picker__date-display  
{  
  background-color: red;  
}

.picker__day--selected, .picker__day--selected:hover, .picker--    focused       .picker__day--selected  
{  
  background-color: red;  
}

【讨论】：