How to change default body color of materialize datetimepicker?

Question

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

I am displaying a login form using Materialize CSS which you can see in the above Codepen. It has two 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?

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 1

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!