HebleV HebleV - 1 month ago 41
CSS Question

how to change default body color of materialize datetimepicker?

You can find the entire code here http://codepen.io/anon/pen/BjqxOq

I am displaying a login form using

materializecss
which you can see in the above
codepen
. It has
2
buttons Login and Register. When Register is clicked a modal is displayed containing necessary registration fields and one of it is materialize datetimepicker.

Is there a possibility to change the default body color of datetimepicker? Kindly help me with your valuable answers. Thank you in advance.

HTML

<div class="row">
<div class="input-field col s6">Date of Birth
<input type="date" class="datepicker ">
</div>
</div>


JS

$(document).ready(function(){
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year
});
});

Answer

The materializecss datepicker has a div with a class called "picker__box". If you set the background-color for this class, your datepicker will assume this color, as you can see in below codepen.

http://codepen.io/anon/pen/OMBoMz

.picker__box{
    background-color: #CCC;
}

EDIT

To change the upper half body color too, you have to set background-color for two more classes:

.picker__date-display, .picker__weekday-display{
    background-color: #CCC;
}

I hope this helps!