如何更改materialize datetimepicker的默认正文颜色?

Heb*_*leV 9 html css datetimepicker materialize

你可以在http://codepen.io/anon/pen/BjqxOq找到完整的代码

我正在使用Materialize CSS显示一个登录表单,您可以在上面的Codepen中看到.它有两个按钮登录注册.单击"注册"时,将显示一个包含必要注册字段的模式,其中一个是物化日期时间选择器.

是否有可能更改datetimepicker的默认正文颜色?

HTML

<div class="row">
    <div class="input-field col s6">Date of Birth
        <input type="date" class="datepicker ">
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

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
    });
});
Run Code Online (Sandbox Code Playgroud)

Adi*_*rya 11

我注意到有些答案不起作用我已经搜索了一下,这就是结果.根据此更改您的CSS文件.我已经添加了下面的所有文字随意复制.

希望能帮助到你...

.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; }
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

  • 遗憾的是,尽管 Materializecss 提供了一些变量来设置这些颜色(请参阅 _variables.scss),但它们并未提供此答案中提供的详细程度。 (2认同)

All*_*ira 7

materializecss datepicker有一个div,有一个叫做的类"picker__box".如果为此类设置背景颜色,则datepicker将采用此颜色,如下面的codepen中所示.

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

.picker__box{
    background-color: #CCC;
}
Run Code Online (Sandbox Code Playgroud)

编辑

要更改上半身颜色,还必须为另外两个类设置背景颜色:

.picker__date-display, .picker__weekday-display{
    background-color: #CCC;
}
Run Code Online (Sandbox Code Playgroud)

我希望这有帮助!