Question

我知道声音很糟糕，但我需要在这里选择禁用日期： https://eonasdan.github.io/bootstrap-datetimepicker/

为什么呢？我需要以较少的预订可能性为日期着色，并且可以预订的可能性更大的绿色日期，所以我写道：

 protected class MyWebClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if (url.startsWith("tel:")) {
            if ( ContextCompat.checkSelfPermission( this, android.Manifest.permission.CALL_PHONE ) != PackageManager.PERMISSION_DENIED ) 
            {
            Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse(url));
            startActivity(intent);
            }
        }
            else if(url.startsWith("http:") || url.startsWith("https:")) {
            view.loadUrl(url);
        }
        return true;
    }
}

正如您所看到的，我已启用绿色日期，其他日期已禁用且红色...但我需要允许访问者选择也禁用日期，而不仅仅是启用......

我使用启用和禁用仅为日历上的日期着色...

那么如何允许选择禁用日期？

Answer 1

由于您要选择那些日子，因此不应禁用它们。相反，您可以使用data attribute selector将css类添加到要为红色着色的td。请注意，如果更改datetimepicker语言环境，则可能需要更新选择器格式。

您可以在这里找到一个有效的例子：

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

Datetimepicker - 允许选择禁用日期

1 个答案: