JQuery Datepicker查找下一个禁用日期 [英] JQuery Datepicker find next disabled date

问题描述

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

When a user selects a date by clicking on the calendar, is it possible to find the next/closest disabled future date.

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

From what I've seen disabled dates do not output a date in the markup, they only output the day (I need the year,month,day), so looking for the next 'ui-state-disabled' element wont work.

推荐答案

AFIK有否官方资源 ，以查找jQuery Datepicker中的禁用日期。

AFIK, there is no official resource for finding out the disabled dates in jQuery Datepicker.

但是，jQuery UI Datepicker是JavaScript上的一个库，总是

However jQuery UI Datepicker is a library upon Javascript, there is always a workaround. Below is a workaround I have tried.

下面是一个解决方法。是一种在jQuery Datepicker中禁用日期列表的方法。

Below is a way to disable a list of dates in 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));
    }
});

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

Now here my approach to get the next disabled date within the month.

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

注意：仅在所选日期的月份工作

NOTE: This is work only for the selected date's month

在他的评论中提到的@ Salman A我觉得最好的办法是跟它一起去。因为我的方法将在一个月内受到限制。

As @ Salman A mentioned in his comment, I feel the best way is to go with it. Since my approach will is constrained within month.

这是一个优雅的方法来解决你的问题。

Here is an elegant approach to solve your problem.

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(http://stackoverflow.com/a/10124053/1671639)
    ls.sort(function (a, b) {
        return a - b;
    });
    return ls;
}

JSFiddle

排序日期，我从 @ Phrogz的回答

这篇关于JQuery Datepicker查找下一个禁用日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！