Home Ask Login Register

Developers Planet

Your answer is one click away!

HebleV February 2016

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.


<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


Allan Pereira February 2016

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!

Post Status

Asked in February 2016
Viewed 1,101 times
Voted 13
Answered 1 times


Leave an answer

Quote of the day: live life