如何更改实现日期时间选择器的默认正文颜色?

问题描述

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

You can find the entire code here http://codepen.io/anon/pen/BjqxOq

我正在使用Materialize CSS显示登录表单，您可以在上面的Codepen中看到该表单.它有两个按钮登录和注册.单击注册"后，将显示一个模态，其中包含必要的注册字段，其中一个是实现 datetimepicker .

I am displaying a login form using Materialize CSS which you can see in the above Codepen. It has two buttons Login and Register. When Register is clicked a modal is displayed containing necessary registration fields and one of it is materialize datetimepicker.

是否可以更改datetimepicker的默认主体颜色?

Is there a possibility to change the default body color of 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
    });
});

推荐答案

materializecss日期选择器具有一个div，其类名为"picker__box".如果您为此类设置了背景颜色，则日期选择器将采用该颜色，如下面的代码笔所见.

The materializecss datepicker has a div with a class called "picker__box".If you set the background-color for this class, your datepicker will assume this color, as you can see in below codepen.

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

.picker__box{
    background-color: #CCC;
}

编辑

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

To change the upper half body color too, you have to set background-color for two more classes:

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

我希望这会有所帮助！

这篇关于如何更改实现日期时间选择器的默认正文颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！