How to change background color of datepicker form in Materialize design

Question

I am using date picker in materialize design. But i want to change color of opened date picker.

SCREEN SHOT.

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

I have seen one link but i could not solve this problem. How to change the cell color of a jquery datepicker

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

Answer 1

Using css you can change color of datepicker:

Try:

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