Question

当用户通过点击日历选择日期时，是否可以找到下一个/最近的已禁用未来日期。

从我看到的禁用日期不会在标记中输出日期，它们只输出日期（我需要年，月，日），所以寻找下一个'ui-state-disabled'元素不会工作

Answer 1

AFIK，没有official resource 用于查找jQuery Datepicker中的禁用日期。

然而 jQuery UI Datepicker是一个基于Javascript的库，总有一种解决方法。以下是我尝试过的解决方法。

步骤＃1：

以下是在jQuery Datepicker中禁用日期列表的方法。

var array = ["2014-03-14", "2014-03-18", "2014-03-16", "2014-04-01"]

$('input').datepicker({
    dateFormat: 'yy-mm-dd',
    beforeShowDay: function (date) {
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [array.indexOf(string) == -1]
    },
    onSelect: function (date) {
            console.log(findNextDisabledDateWithinMonth(date));
    }
});

现在我的方法是在一个月内获得下一个禁用日期。

第2步：

function findNextDisabledDateWithinMonth(date) {
    var currentDate = Number(date.split('-')[2]);
    var month = $('.ui-datepicker-title>.ui-datepicker-month').text(); //Number(date.split('-')[1])
    var year = $('.ui-datepicker-title>.ui-datepicker-year').text();  //Number(date.split('-')[0])
    var nextConsectiveDates = [];
    $.each($('.ui-state-disabled').find('.ui-state-default'), function (i, value) {
        var numericDate = +$(value).text();
        if (currentDate < numericDate) {
            nextConsectiveDates.push(numericDate);
        }
    });
    var nextDisabledDate = nextConsectiveDates[0] + "-" + month + "-" + year;
    return nextDisabledDate;
}

JSFiddle

注意： 这仅适用于所选日期的月份

方法＃2

正如@ {Salman A在他的comment中提到的那样，我觉得最好的办法就是顺其自然。由于我的方法将在一个月内受到限制。

这是一种解决问题的优雅方法。

var array = ["2014-05-01", "2014-04-14", "2014-04-18", "2014-04-16"];
// Convert all those string dates into Date array
var arrayAsDateObjects = convertStringToDateObject(array);

$('input').datepicker({
    dateFormat: 'yy-mm-dd',
    beforeShowDay: function (date) {
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [array.indexOf(string) == -1]
    },
    onSelect: function (date) {
        alert(findNextDisabledDateWithinMonth(date).toDateString());
    }
});

//To find the next exact disabled date based on the selected date
function findNextDisabledDateWithinMonth(date) {
    var splitDate = date.split("-");
    var selectedDate = new Date(splitDate[0], Number(splitDate[1]) - 1, splitDate[2]);
    var nextDisabledDate = null;
    $.each(arrayAsDateObjects, function (i, ele) {
        if (selectedDate < ele) {
            nextDisabledDate = ele;
            return false;
        } else {
            nextDisabledDate = "No Disabled dates available";
        }
    });
    return nextDisabledDate;
}

//convert all the string dates to Date object
function convertStringToDateObject(array) {
    var ls = [];
    $.each(array, function (i, ele) {
        var splitDate = ele.split("-");
        var date = new Date(splitDate[0], Number(splitDate[1]) - 1, splitDate[2]);
        ls.push(date);
    });
    // Sort the dates in ascending order(https://stackoverflow.com/a/10124053/1671639)
    ls.sort(function (a, b) {
        return a - b;
    });
    return ls;
}

JSFiddle

为了排序日期，我参考了@Phrogz 's answer

Answer 2

我希望datepicker可以为此内置一个函数，但看起来并没有。所以我不得不查看我的残疾人日期列表和确定列表中的答案，这是我试图避免的，因为列表很大。

Answer 3

这是我网站上日期选择器的一天。

<td class=" " 
  onclick="DP_jQuery_139.datepicker._selectDay('#Dob',2,2014, this);return false;">
     <a class="ui-state-default" href="#">21</a>
</td>

你能解析父td的点击吗？或者禁用日期也会删除点击事件中的父级？无论如何，这里的东西可能会指向正确的方向。未经测试，你可以摆弄它。已经很晚了，我需要休息一下。

$('.ui-datepicker-calendar a.ui-state-default').click(function() {
   var clickhandler = $(this).closest('td').next('td:has(a.ui-state-disabled)').attr('onclick');
   var monthYear = clickhandler.replace(/^.*,?/,'').replace(/, this.*/,'').split(',');
   // do something with your monthYear array here
});

JQuery Datepicker找到下一个禁用日期

3 个答案:

步骤＃1：

第2步：

方法＃2

JSFiddle