Come cambiare il colore predefinito del corpo di materialize datetimepicker?

Question

È possibile trovare l'intero codice qui http://codepen.io/anon/pen/BjqxOq

sto visualizzazione di un form di login utilizzando Materialise CSS che potete vedere in quanto sopra Codepen. Ha due pulsanti Login e Registro. Quando si fa clic su Registra, viene visualizzata una modale contenente i campi di registrazione necessari e una di esse si materializza datetimepicker.

Esiste la possibilità di modificare il colore del corpo predefinito di datetepeper?

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

Il datepicker materializecss ha un div con una classe chiamata "picker__box". Se si imposta il colore di sfondo per questa classe, il tuo datepicker assumerà questo colore, come puoi vedere in basso codepen.

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

.picker__box{ 
    background-color: #CCC; 
} 

EDIT

Per cambiare il colore superiore del corpo la metà troppo, è necessario impostare background-color per ulteriori due classi:

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

Spero che questo aiuta!

Answer 2

EDIT: Questo non cambia il corpo, ma tutto, ma il corpo, e lasciare che il corpo bianco

Non posso commentare.

La soluzione di Allan Pereira non ha funzionato per me, tutto è andato al mio colore (anche lo sfondo bianco).

Ho usato questo

.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); 
    } 

(colore è un bel blu)

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

Answer 3

ho notato che alcune risposte non funzionano Ho cercato un po 'e questo è il risultato. Cambia il tuo file CSS in base a questo. Ho aggiunto tutto il testo qui sotto, non esitate a copiare.

Speranza che aiuta ...

.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; }