我在物化设计中使用日期选择器。但我想改变打开日期选择器的颜色。
屏幕拍摄。
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<div class="container">
<div class="row">
<div class="col s6 m6 l6">
SELECT DATE
<input type="date" class="datepicker">
</div>
</div>
</div>
我看过一个链接,但我无法解决这个问题。 How to change the cell color of a jquery datepicker
的jsfiddle: https://jsfiddle.net/varunPes/6smvtLxt/
使用css你可以改变datepicker的颜色:
尝试:
https://jsfiddle.net/ncrmyt6n/
.picker__date-display {
background-color:blue;
}
.picker__weekday-display {
background-color:red;
}
.picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected {
background-color:blue;
}
您可以覆盖Materialize.css的CSS,在自定义CSS文件中添加这些行
.picker__date-display
{
background-color: red;
}
.picker__day--selected, .picker__day--selected:hover, .picker-- focused .picker__day--selected
{
background-color: red;
}
实际上,如果你想改变datetime-picker颜色,这里是代码:
.datepicker-date-display {
background-color: #607d8b
}
.datepicker-day-button:focus {
color: white !important;
background-color: #a2b0b6
}
.datepicker-done,
.datepicker-cancel,
.select-dropdown li>span,
.is-today {
color: #607d8b !important
}
td.is-selected,
.month-prev:active,
.month-prev:focus,
.month-next:active,
.month-next:focus {
background-color: #607d8b !important
}
td.is-selected.is-today {
color: white !important
}
但是,如果你想更改时间戳,这里是代码:
.timepicker-digital-display {
background-color: #607d8b
}
.timepicker-close {
color: #607d8b
}
.timepicker-canvas-bg,
.timepicker-canvas-bearing {
fill: #607d8b !important
}
.timepicker-canvas line {
stroke: #607d8b
}
.timepicker-tick:hover {
background-color: #a2b0b6
}
.datepicker-date-display {
background: red;
}
.datepicker-calendar-container {
color: blue;
}
.is-today {
color: orange !important;
}
.datepicker-table td.is-selected {
background: gray !important;
}
.datepicker-cancel, .datepicker-done {
color: silver;
}