dateTimePicker的 - 允許選擇上禁用日期

我知道，聲音crasy但我需要讓這裏選擇禁用日期： https://eonasdan.github.io/bootstrap-datetimepicker/dateTimePicker的 - 允許選擇上禁用日期

爲什麼？我需要的顏色日期以較少的可能性預訂，並且色澤綠日期，其中可能性本書是更大，所以我寫：

<script> 
    $(function() { 
     $('#start').datetimepicker({ 
      format: 'YYYY/MM/DD', 
      enabledDates: [ 
       moment("05/21/2016"), 
       moment("05/22/2016"), 
       moment("05/23/2016"), 
       moment("05/24/2016"), 

      ], 
     }); 
    }); 
</script> 
<style type="text/css"> 
    .bootstrap-datetimepicker-widget table th.disabled, 
    .bootstrap-datetimepicker-widget table th.disabled:hover { 
     background: #FF9088 !!important; 
     border-radius: 0px !important; 
     color: #fff !important; 
     border: 1px solid #fff !important; 

    } 
    .bootstrap-datetimepicker-widget table td.disabled, 
    .bootstrap-datetimepicker-widget table td.disabled:hover { 
     background: #FF9088 !important; 
     border-radius: 0px !important; 
     border: 1px solid #fff !important; 

     color: #fff !important; 
    } 
    .bootstrap-datetimepicker-widget table td span.disabled, 
    .bootstrap-datetimepicker-widget table td span.disabled:hover { 
     background: #FF9088 !important; 
     border-radius: 0px !important; 
     border: 1px solid #fff !important; 

     color: #fff !important; 
    } 
    .day { 
     background: rgba(88, 204, 0, 0.52) !important; 
     border-radius: 0px !important; 
     border: 1px solid #fff !important; 
    } 
</style>

正如你所看到的，我已經能夠在綠色和其他日期日期是禁用其在紅色......但我需要讓遊客也可以選擇禁用日期，而不是僅僅使...

我使用啓用和禁用只是對日曆顏色日期...

那麼如何允許選擇禁用日期嗎？

來源

2016-05-30 Aleks Per

既然你想選擇那些日子，你不應該禁用它們。相反，您可以通過使用data attribute selector將您需要爲紅色的td添加一個css類。請注意，如果更改datetimepicker語言環境，則可能必須更新選擇器格式。

在這裏你可以找到一個工作示例：

function addRedClass() { 
 
    var redDates = ["05/21/2016","05/22/2016","05/23/2016","05/24/2016"]; 
 
    for(var i=0; i<redDates.length; i++){ 
 
     $('[data-day="'+redDates[i]+'"]').addClass('redDate'); 
 
    } 
 
} 
 

 
$('#start').datetimepicker({ 
 
    format: 'YYYY/MM/DD' 
 
}).on('dp.show dp.update', addRedClass);

.bootstrap-datetimepicker-widget table th.redDate, 
 
.bootstrap-datetimepicker-widget table th.redDate:hover { 
 
    background: #FF9088 !!important; 
 
    border-radius: 0px !important; 
 
    color: #fff !important; 
 
    border: 1px solid #fff !important; 
 

 
} 
 
.bootstrap-datetimepicker-widget table td.redDate, 
 
.bootstrap-datetimepicker-widget table td.redDate:hover { 
 
    background: #FF9088 !important; 
 
    border-radius: 0px !important; 
 
    border: 1px solid #fff !important; 
 

 
    color: #fff !important; 
 
} 
 
.bootstrap-datetimepicker-widget table td span.redDate, 
 
.bootstrap-datetimepicker-widget table td span.redDate:hover { 
 
    background: #FF9088 !important; 
 
    border-radius: 0px !important; 
 
    border: 1px solid #fff !important; 
 

 
    color: #fff !important; 
 
} 
 
.day { 
 
    background: rgba(88, 204, 0, 0.52) !important; 
 
    border-radius: 0px !important; 
 
    border: 1px solid #fff !important; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class='input-group date' id='start'> 
 
    <input type='text' class="form-control" /> 
 
    <span class="input-group-addon"> 
 
    <span class="glyphicon glyphicon-calendar"></span> 
 
    </span> 
 
</div>

來源

2016-05-30 22:07:24 VincenzoC

dateTimePicker的 - 允許選擇上禁用日期

回答

相關問題