如何更改物化日期时间选择器的默认主体颜色？

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

I have noticed that some answers are not working I have searched a bit and this is the result. Change your CSS file according to this. I have added all the text below feel free to copy.

Hope it helps...

.picker__date-display { background-color: #6d4e7a; }
.picker__day.picker__day--today { color: red; }
.picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected { background-color: #6d4e7a;}
.picker__close { color: #6d4e7a !important;}
.picker__today { color: #6d4e7a !important;}
.clockpicker-tick:hover { background: #6d4e7a !important; }
.clockpicker-canvas line { stroke: #6d4e7a !important; }
.clockpicker-canvas-bearing { fill: #6d4e7a !important; }
.clockpicker-canvas-bg { fill: #6d4e7a !important; }

Answer 2

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!

Answer 3

EDIT: This doesn't change the body, but everything but the body, and let the body white

Cant comment.

Allan Pereira solution didn't work for me, everything went to my color (even the white-background).

I used this

    .picker__date-display, .picker__weekday-display{
        background-color: rgba(66, 133, 244, 0.79);
    }

    div.picker__day.picker__day--infocus.picker__day--selected.picker__day--highlighted {
        background-color: rgba(66, 133, 244, 0.79);
    }

    button.picker__today, button.picker__close {
        color: rgba(66, 133, 244, 0.79);
    }

(color is a nice blue)

edit: codepen: http://codepen.io/anon/pen/Kgxbdj#anon-signup

Answer 4

This code worked for me for changing the pickers color.

.timepicker-canvas line {
    stroke: red;
}

.timepicker-canvas-bg, 
.timepicker-canvas-bearing {
    fill: red;
}

Answer 5

Some answers are not working but this method worked for me, just copy and paste as is in your css file.

.datepicker-date-display {
 background-color: rgb(118, 186, 241);
}

.datepicker-cancel, .datepicker-clear, .datepicker-today, .datepicker-done {
 color:rgb(69, 143, 204);
}

.datepicker-table td.is-today {
 color: rgb(69, 143, 204);
}

.datepicker-table td.is-selected {
 background-color: rgb(118, 186, 241);
 color: #fff;
}