改变bootstrapdatetimepickerwidget CSS

更新——我最终成功地使用了下面的方法

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.ui-datepicker {
  width: 400px;
  height: auto;
  margin: 5px auto 0;
  font: 10pt Arial, sans-serif;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}

最初的问题

到目前为止，我的尝试改变Bootstrap日期定时器选择器CSS都完全失败。我已经尝试在我的项目的多个区域输入代码，但就目前的情况来看，我无法看到小部件的任何更改。

在其他资料中，我阅读了这两篇文章，并尝试遵循他们的建议。

当选择年份时，重写bootstrap datetime picker的CSS类

缩小bootstrap-datepicker字段的大小并更改其文本颜色

不幸的是，这两个都帮不了我。

customdatetimepicker2 / forms。py

from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth.forms import ReadOnlyPasswordHashField
from .models import User
from .widgets import BootstrapDateTimePickerInput
from bootstrap_datepicker_plus import DatePickerInput
class RegisterForm(forms.ModelForm):
    # username = forms.CharField(label='test abc')
    # email    = forms.EmailField()
    password1 = forms.CharField(label='password 1', widget=forms.PasswordInput)
    password2 = forms.CharField(label='Confirm Batman password', widget=forms.PasswordInput)
    class Meta:
        model = User
        fields = ['full_name', 'email', 'd_o_b']#, 'profilepicture'] #'full_name',
        widgets = {'d_o_b': DatePickerInput(format='%d/%m/%Y')}

低音/就是说

<style>
.body .background {color: red}
.body {color: green}
        .bootstrap-datetimepicker-widget {
    top: 0;
    left: 0;
    width: 670px;
    padding: 4px;
    margin-top: 1px;
    z-index: 99999;
    border-radius: 4px;
}
  .bootstrap-datetimepicker{
    top: 0;
    left: 0;
    width: 670px;
    padding: 4px;
    margin-top: 1px;
    z-index: 99999;
    border-radius: 4px;
}
.bootstrap-datetimepicker-widget table {
     width: 870px;
}
.bootstrap-datetimepicker-widget table td span.active {
    background-color: #337ab7;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
</style>

Customdatetimepicker2 / templates / register3。html

    {% extends "base5.html" %} 
    
    {% block content %}
    
    
    
    
    is this style working
    
     <style>
    
    testing the css in register 
    
   .bootstrap-datetimepicker-widget {
        top: 0;
        left: 0;
        width: 670px;
        padding: 4px;
        margin-top: 1px;
        z-index: 99999;
        border-radius: 4px;
    }
    
    
    
    .body .background {color: red}
    .body {color: green}
    
    
    
         
    
    .bootstrap-datetimepicker-widget table td span.active {
        background-color: #337ab7;
        color: #ffffff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }
    
    
    
    .background {color: red}
    
    
        </style>
    
          
    <div class="container">
        <div class='row'>
            <div class='col-5'>
                <form method='POST' enctype="multipart/form-data"> {% csrf_token %}
                    
                    <table class="table" style = "border: none">
                        
                              
                           
    
                        <thead style="border: none">
                            
                                    
                        </thead>
    
                    
                        <tbody style="border: none">
                            {% for field in form.visible_fields %}
                                    <tr style="border: none">
                                        
                                        <td style="border: none">{{ field.label_tag }}</td>
                                        
                                        <td style="border:none" id="{{ field.id }}">{{ field }}{{ field.errors }}</td> 
                                                        
                                    </tr>
                            {% endfor %}
    
                        </tbody>
    
                    </table>
    
    
    
                    <button type='submit' class='btn btn-default'>Submit</button>
                </form>
            </div>
        </div>
    </div>
    Testing CSS and Bootstrap Widget
    
    
    
    
      <script>
        var currentdate = new Date();  // now time
        var mindate , year , month , day;
    
        currentdate.setDate(currentdate.getDate() - 21); // -3w
        year = currentdate.getFullYear();
        month = currentdate.getMonth()+1;
        day = currentdate.getDate();
        mindate = month.toString() + '/' + day.toString() + '/' + year.toString();
      $( function() {
        $( "#id_d_o_b" ).datepicker({
            startDate: mindate
            // style="top: 752px"
    
    
        // background: rgb(44, 16, 15);
        
    
    
        });
      } );
    
    
     
    
    
     
    
    // The datapicker still appears but the color has not changed
    
        $( function() {
        $( ".bootstrap-datetimepicker-widget" ).css("background-color", "#4d3e43")
            
    
        });
    
    
          $( function() {
        $( ".bootstrap-datetimepicker-widget" ).css("background-color", "#red")
            
    
        });
    
    
    
          $( function() {
        $( ".bootstrap-datetimepicker-widget" ).css("border", "#green")
            
    
        });
    
    
    
    
        $( function() {
        $( ".bootstrap-datetimepicker-widget.table" ).css("background-color", "#4d3e43")
            
    
        });
    
    
          $( function() {
        $( ".bootstrap-datetimepicker-widget.table" ).css("background-color", "#red")
            
    
        });
    
    
    
          $( function() {
        $( ".bootstrap-datetimepicker-widget" ).css("border", "#green")
            
    
        });
    
    
   
    
     
    
    
    
    
      
      </script>
    </head>
    <body>
     
     
     
    </body>
    </html>
    
    
    {% endblock %}     

Customdatetetimepicker2 / templates / base5。html

<style>
    testing the css in register 
    .bootstrap-datetimepicker-widget {
    top: 0;
    left: 0;
    width: 670px;
    padding: 4px;
    margin-top: 1px;
    z-index: 99999;
    border-radius: 4px;
}
.body .background {color: red}
.body {color: green}
     
.bootstrap-datetimepicker-widget table td span.active {
    background-color: #337ab7;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.background {color: red}
</style>