varun sharma varun sharma - 4 months ago 104
HTML Question

How to change background color of datepicker form in Materialize design

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

SCREEN SHOT.



enter image description here



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

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