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=".1.1/jquery.min.js"></script>
  <link rel="stylesheet" href=".97.6/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src=".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 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.6/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare./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/varunPes/6smvtLxt/

• javascript
• jquery
• html
• datepicker
• materialize

4 Answers 4

Using css you can change color of datepicker:

Try:

https://jsfiddle/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;
}

actually, if you want to change datetime-picker colors, here's the code:

.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

however, if you want to change the timepicker too, here's the code:

.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

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

You can override CSS of Materialize.css, add these lines in your custom CSS file

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

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