3

我想9th of September 2017在我的 daterangepicker 中禁用日期：

var date = new Date();
var currentMonth = date.getMonth();
var currentDate = date.getDate();
var currentYear = date.getFullYear();
$('input[name="daterange"]').daterangepicker({
    minDate: new Date(currentYear, currentMonth, currentDate)
    , dateFormat: 'yy-mm-dd'
    , startDate: moment(date).add(1,'days')
    , endDate: moment(date).add(2,'days')
    , datesDisabled:["17-09-09"]
    , locale: {
        format: 'DD.MM.YYYY'
    }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />

但是我的日历中没有禁用日期

4

1 回答 1

4

bootstrap-daterangepicker没有datesDisabled选项。相反，此选项属于Bootstrap 3 Datepicker。

使用daterangepicker您可以使用isInvalidDate选项：

isInvalidDate: function(ele) {
    var currDate = moment(ele._d).format('YY-MM-DD');
    return ["17-09-09"].indexOf(currDate) != -1;
}

片段：

var date = new Date();
var currentMonth = date.getMonth();
var currentDate = date.getDate();
var currentYear = date.getFullYear();
$('input[name="daterange"]').daterangepicker({
    minDate: new Date(currentYear, currentMonth, currentDate)
    , dateFormat: 'yy-mm-dd'
    , startDate: moment(date).add(1,'days')
    , endDate: moment(date).add(2,'days')
    , isInvalidDate: function(ele) {
        var currDate = moment(ele._d).format('YY-MM-DD');
        return ["17-09-09"].indexOf(currDate) != -1;
    }
    , locale: {
        format: 'DD.MM.YYYY'
    }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />


<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />

于 2017-08-09T17:59:41.610 回答