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

时间:2016-02-06 21:01:11

标签: html css datetimepicker materialize

您可以在http://codepen.io/anon/pen/BjqxOq

找到完整的代码

我正在使用Materialise CSS显示登录表单,您可以在上面的Codepen中看到。它有两个按钮登录注册。单击“注册”时,将显示一个包含必要注册字段的模式,其中一个实现 datetimepicker

是否有可能更改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
    });
});

5 个答案:

答案 0 :(得分:9)

我注意到有些答案无效 我搜索了一下,这就是结果。 根据此更改您的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; }

enter image description here

答案 1 :(得分:7)

materializecss datepicker有一个div,名为localStorage。 如果您为此类设置背景颜色,则您的日期选择器将采用此颜色,如下面的代码集中所示。

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

"picker__box"

修改

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

.picker__box{
    background-color: #CCC;
}

我希望这有帮助!

答案 2 :(得分:2)

编辑:这不会改变身体,但除了身体之外的一切,让身体变白

不能评论。

Allan Pereira解决方案对我不起作用,一切都按照我的颜色(甚至是白色背景)。

我用过这个

"V:|-0-[newBar(\(newBar.height))]-0-[tableView]-0-|"

(颜色是漂亮的蓝色)

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

答案 3 :(得分:0)

此代码对我来说可以更改选择器的颜色。

.timepicker-canvas line {
    stroke: red;
}

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

答案 4 :(得分:0)

某些答案不起作用,但是这种方法对我有用,只需按原样复制并粘贴到CSS文件中即可。

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