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

Question

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

屏幕截图。

 $('.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>

我见过一个 link 但我无法解决这个问题。 How to change the cell color of a jquery datepicker

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

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

Answer 2

您可以覆盖 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;  
}

Answer 3

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

.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

Answer 4

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

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

How to change background color of datepicker form in Materialize design

html

javascript

jquery

datepicker

materialize