如何在日期选择器中动态禁用不可用日期

Question

我正在尝试动态禁用不可用日期，我该怎么做？

如果我像下面这样给出静态值，它就可以正常工作。

var unavailableDates = ["10-8-2015","24-7-2015","10-7-2015","09-8-2015","09-7-2015","01-12-2015","01-1-2016","11-8-2015"];  

如果我动态获取这个值，它就不能正常工作，我该如何解决？

我的 Fiddle

var unavailableDates = $('#DesignIdUnavialble').html();

function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    if ($.inArray(dmy, unavailableDates) == -1) {
        return [true, ""];
    } else {
        return [false, "", "Unavailable"];
    }
}

$(function() {
    $("#iDate").datepicker({
        defaultDate: new Date("7-7-2015"),
        minDate:0,
        dateFormat: 'dd-mm-yy',
        beforeShowDay: unavailable
    });

});

我的代码有什么问题？能帮我看一下吗？

- Question User

---

请更新您在Fiddle和问题中的HTML。$('#DesignIdUnavialble').html()将给您一个字符串，而unavailableDates需要一个数组。您的.html()内容是什么？如果它是逗号分隔的日期，请尝试使用$('#DesignIdUnavialble').html().split(',')。 - Amit.rk3

请检查我的更新版fiddle :) - Question User

你能给我演示一下如何执行 $('#DesignIdUnavialble').html().split(',') 吗？@Amit.rk3 - Question User

http://www.w3schools.com/jsref/jsref_split.asp - LeonH

抱歉，我知道split函数，但我需要期望的结果。@Stormie - Question User

就像Amit所说的那样，它适用于静态值，因为它是一个数组（这是预期的），而动态值则不适用，因为它们是字符串。你想要做的是要么改变你呈现动态值的方式，你可以将日期字符串更改为使用split函数拆分成子字符串的数组。 :) - LeonH

Answer 1

请尝试这个演示，只需更改日期格式为m/d/Y即可。

$(document).ready(function(){
var Desingndate = $('#DesignIdUnavialble').html();
var splitdate = Desingndate.split(',');
   // console.log(splitdate.length);
    var arrDisabledDates = {};
    for (var i = 0; i < splitdate.length; i++) {
        //console.log(splitdate[i]);    
    arrDisabledDates[new Date(splitdate[i])] = new Date(splitdate[i]);    
    }

     $("#iDate").datepicker({       
        dateFormat: 'dd-mm-yy',
        beforeShowDay: function (dt) {
            var bDisable = arrDisabledDates[dt];
            if (bDisable) return [false, '', ''];
            else return [true, '', ''];
        }
    });

});

- I'm Geeker

Answer 2

根据我的评论，以下是更新后的代码。

更新后的样例 - 可用的样例

var unavailableDates =$('#DesignIdUnavialble').html().replace(/\"/g,'').split(",");
console.log(unavailableDates);
function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    if ($.inArray(dmy, unavailableDates) == -1) {
        return [true, ""];
    } else {
        return [false, "", "Unavailable"];
    }
}

$(function() {
    $("#iDate").datepicker({
        defaultDate: new Date("3-3-2015"),
        dateFormat: 'dd MM yy',
        beforeShowDay: unavailable
    });

});

- Amit.rk3

---

谢谢Amit，它在Fiddle上运行良好，但在我的项目中不起作用 :) 再次感谢您的帮助。 - Question User

@QuestionUser：可能是因为我在fiddle中使用了不同的jQuery版本？ - Amit.rk3