2017-11-02 13 views
0

次のプロジェクトには、DateTimePickerを使用しています。https://www.malot.fr/bootstrap-datetimepicker/demo.php、私は2つの日付を無効にしています。DateTimeピッカーブートストラップで非アクティブな日の背景を編集する

注:私はブートストラップ3

コード

HTMLを使用します。問題は、それが動作しないということである

<!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; 
} 

を、変更してみてください。 .datepickerによってdatetimepickerが動作しません。

この問題を解決するにはどうすればよいですか?

答えて

0

bootstrap-datetimepicker.min.cssの前におそらくstyle.cssが含まれている可能性があります。あなたのstyle.cssのセレクタは、bootstrap-datetimepicker.min.cssのセレクタと同じように固有なので、あなたのルールは上書きされます。順序を変更するだけで問題は解決します。

関連する問題