How to change default body color for datetimepicker materialization?

Question

Here you can find all the code http://codepen.io/anon/pen/BjqxOq

I am showing a login form using Materialize CSS, which you can see in the codec above. It has two Login and Registration buttons. When you click on the register, a modal code is displayed containing the necessary registration fields, and one of them materializes the datetimepicker .

Is it possible to change the default body color for 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

Datepicker for materializecss has a div with class "picker__box" . If you set the background color for this class, your date pointer will accept that color, as you can see in the code below.

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

 .picker__box{ background-color: #CCC; } 

EDIT

To change the color of the upper half of the body, you must set background-color for two more classes:

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

Hope this helps!

Answer 2

I noticed that some answers do not work, I searched a bit, and this is the result. Modify your CSS file accordingly. 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 3

EDIT: It does not change the body, but everything except the body and let the body be white

I can not answer.

Allan Pereira's solution did not work for me, everything went to my color (even on a 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); } 

(blue color)

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

Answer 4

This code worked for me to change the color of the collectors.

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

Answer 5

 .datepicker-date-display { background: red; } .datepicker-calendar-container { color: blue; } .is-today { color: orange !important; } .datepicker-table td.is-selected { background: gray !important; } .datepicker-cancel, .datepicker-done { color: silver; }