HebleV HebleV - 1 year ago 167
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

which you can see in the above
. It has
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.


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


selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year

Answer Source

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.


    background-color: #CCC;


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!