マテリアライズデザインで日付ピッカーフォームの背景色を変更する方法

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>

私は1つのリンクを見てきましたが、私はこの問題を解決することができませんでした。 How to change the cell color of a jquery datepicker

JSFIDDLE：CSSを使用し
https://jsfiddle.net/varunPes/6smvtLxt/

Answer 1

あなたは日付ピッカーの色を変更することができます。

試してみてください。

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