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

Question

您可以在此处找到完整代码http://codepen.io/anon/pen/BjqxOq

我正在使用 Materialize 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
    });
});

Answer 1

materializecss 日期选择器有一个 div 和一个名为 "picker__box" 的 class。如果您为此 class 设置背景颜色，您的日期选择器将采用这种颜色，如您在下面的代码笔中所见。

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

.picker__box{
    background-color: #CCC;
}

编辑

要同时更改上半身颜色，您必须设置另外两个 classes 的背景颜色：

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

希望对您有所帮助！

Answer 2

编辑：这不会改变 body，但除了 body 之外的所有内容，让 body 白色

无法评论。

Allan Pereira 解决方案对我不起作用，一切都符合我的颜色（甚至 white-background）。

我用过这个

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

（颜色是漂亮的蓝色）

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

Answer 3

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

Answer 4

此代码对我更改选择器颜色有用。

.timepicker-canvas line {
    stroke: red;
}

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

Answer 5

有些答案不起作用，但这种方法对我有用，只需按原样复制并粘贴到您的 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;
}

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

How to change default body color of materialize datetimepicker?

html

css

datetimepicker

materialize