Question

我正在尝试更改bootstrap datepicker中所选日期的颜色，并尝试更改datepicker容器的背景颜色，但似乎没有可用于更改和自定义的选项。

如果有任何可用的内容来定制日历设计，请告诉我。

 $('#date_of_completion').datepicker({
        format: 'dd/mm/yyyy',
        autoclose: true
    });

Answer 1

你有两种可能做到这一点

1）根据项目少文件编译自己的样式，并用less覆盖背景颜色：

这是你应该覆盖的课程

&.active,
&.active.highlighted {
    .button-variant(@btn-primary-color, @btn-primary-bg, @btn-primary-border);
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}

请参阅datepicker3.less line 170

2）覆盖已编译的css类

.datepicker table tr td.active:active, 
.datepicker table tr td.active.highlighted:active, 
.datepicker table tr td.active.active, 
.datepicker table tr td.active.highlighted.active {
   background-color: green;
}

请参阅the example

Answer 2

你可以覆盖这个类：

.datepicker table tr td.active:active, 
.datepicker table tr td.active:hover:active, 
.datepicker table tr td.active.disabled:active, 
.datepicker table tr td.active.disabled:hover:active, 
.datepicker table tr td.active.active, 
.datepicker table tr td.active:hover.active, 
.datepicker table tr td.active.disabled.active, 
.datepicker table tr td.active.disabled:hover.active {
        background-image: linear-gradient(to bottom, #color, #color);
    }

Answer 3

更新css类（datepicker.css：70）

.datepicker td.active,
.datepicker td.active:hover 
{
color: #ffffff;
background-color: #006dcc;
background-image:  linear-gradient(to bottom, #0088cc, #0044cc);
}

根据需要更改值“＃0044cc”。

Answer 4

我指的是demo：

检查datepicker3.css的第519行

 public class RecyclerHolder extends RecyclerView.ViewHolder{
        HashMap<Integer,Boolean> hashMap;
                    AnimCheckBox checkBox;
                    public RecyclerHolder(final View itemView) {
                        super(itemView);

                        checkBox=(AnimCheckBox) itemView.findViewById(R.id.checkBox);
                        checkBox.setChecked(false);

                       checkBox.setOnCheckedChangeListener(new AnimCheckBox.OnCheckedChangeListener() {
                            @Override
                            public void onChange(boolean checked) {
                                if(checkBox.isChecked()){
                                    boolean check=true;
                                    clicked_position=getAdapterPosition();
                                    i=new Integer(clicked_position);
                                   hashMap.put(i, check);
                                    Toast.makeText(context,"You checked item:"+getAdapterPosition(),Toast.LENGTH_SHORT).show();
             Set s=hashMap.keySet();
                    Iterator i=s.iterator();
                    while (i.hasNext()){
                        Map.Entry entry=(Map.Entry)i.next();
                        Log.e("Position"+entry.getKey().toString(),"Status"+entry.getValue().toString());
                    }
                    SharedPreferences sharedPreferences=context.getSharedPreferences("Main",Context.MODE_PRIVATE);
                    bt_click_status=sharedPreferences.getBoolean("Btnheck",false);
                    Log.e("Entered",Boolean.toString(bt_click_status));
                                }
                                 }
                       });
                    }}

在你的风格中更新或覆盖css。对于悬停效果，你需要更新datepicker3.css的第529行。

Answer 5

添加样式：

选择日

.datepicker table tr td.active,
.datepicker table tr td.active:hover {
    background: rgb(44, 16, 15);
    text-shadow: none;
}

如果选择了另一个日期，则为实际日期右下角的三角形

.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: rgba(44, 16, 15, 1);
}

Answer 6

在使用Django Bootstrap Datepicker Plus的设置中，此解决方案更改了我选择的日期，月份和年份。

.datepicker table tr td.active,
.datepicker table tr td.active:hover {
  background-color: #00ced1;
}
.datepicker table tr td span.active {
  background-color: #00ced1;
}

Answer 7

添加css样式

.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover{
    background-color: #337ab7; 
    color:#fff;
}

如何更改bootstrap datepicker的选定日期颜色背景？

7 个答案: