2017-11-02 1 views
0

Ich verwende DateTimePicker für das folgende Projekt: https://www.malot.fr/bootstrap-datetimepicker/demo.php, Ich habe zwei Daten, die ich deaktivieren, und ich möchte einen roten Hintergrund auf diese Daten setzen.Bearbeiten Hintergrund in inaktiven Tagen in DateTime Picker Bootstrap

Hinweis: Ich benutze Bootstrap 3

-Code

HTML: Modifizieren

<!DOCTYPE html> 
<html> 
<head> 
    <title>Calendario</title> 
    <script src="js/jquery-3.2.1.js"></script> 

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="bootstrap/js/bootstrap.js"></script> 

    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"> 
    <script type="text/javascript" src="js/bootstrap-datetimepicker.js" charset="UTF-8"></script> 
    <script type="text/javascript" src="js/bootstrap-datetimepicker.es.js" charset="UTF-8"></script> 

</head> 

<body> 
<div class="container"> 
    <form action="" class="form-horizontal" role="form"> 
     <fieldset> 
      <legend>Test</legend> 
     <div class="form-group"> 
       <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label> 
       <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd"> 
        <input class="form-control" size="16" type="text" value="" readonly> 
      <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> 
       </div> 
     <input type="hidden" id="dtp_input2" value="" /><br/> 
      </div> 
     </fieldset> 
    </form> 
</div> 

<script type="text/javascript"> 

    var dates = ["11/11/2017","12/11/2017"]; 

    $('.form_date').datetimepicker({ 
     language: 'es', 
     format: 'dd/mm/yyyy', 
     weekStart: 1, 
     todayBtn: 1, 
     autoclose: 1, 
     todayHighlight: 1, 
     startView: 2, 
     minView: 2, 
     forceParse: 0, 
     datesDisabled: dates 
    }); 
</script> 

</body> 
</html> 

style.css

.datetimepicker table tr td.disabled { 
    background: red; 
    color: black; 
} 

.datetimepicker table tr td.disabled:hover { 
    background: red; 
    color: black; 
} 

Das Problem ist, dass es nicht, versuchen Sie nicht funktioniert. datetimepicker by .datepicker aber es funktioniert auch nicht

Wie löse ich dieses Problem?

Antwort

0

Sie sind wahrscheinlich einschließlich Ihrer style.css vor der bootstrap-datetimepicker.min.css. Da die Selektoren in Ihrer style.css genauso spezifisch sind wie die Selektoren in bootstrap-datetimepicker.min.css, werden Ihre Regeln überschrieben. Einfach die Reihenfolge ändern sollte Ihr Problem lösen.

Verwandte Themen