从日期选择器的下拉列表中禁用日期

Question

我有一个包含日期的下拉列表。我可以遍历 jquery 中的日期。但我也有一个日期选择器，我想禁用日期选择器中下拉列表中的日期。

下拉列表的id是：#form_one3。

javascript 是这样的：

inp.datepicker({
    dateFormat: dateFormat,
    changeMonth: true,
    beforeShowDay: function(date) {
        $("#form_one3 > option").each(function() {
            //alert(this.text);  
            var array = [this.Text].toString();
            alert(array.toString());
            var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
            return [array.indexOf(string) == -1];
        });
    },
    changeYear: false,
    showWeek: true,
    firstDay: 1,
    yearRange: "c-100:c+15",
    showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})

如果我这样做：

$("#form_one3 > option").each(function() {
    alert(this.text);
});

我从下拉列表中看到所有日期。

但完整的 javascript 文件只提供空值，并且 datePicker 不再起作用。

谢谢

如果我在beforeShowDay: function (date) { 之间做$("#form_one3 > option:gt(1)").each(function () {

DatePicker 不再工作了。

那么将 .each 函数放在哪里，这样 Datepicker 才能工作。

谢谢

格式是这样的：

<option value="2015-07-27T00:00:00Z">27-7-2015</option>

我现在是这样的：

 inp.datepicker({
                            dateFormat: dateFormat,
                            beforeShowDay: function (date) {                               

                                $("#form_one3 > option:gt(1)").each(function () {                                
                                    var array = [this.Text].toString("yy-mm-dd");
                                    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                                    return [array.indexOf(string) == -1];
                                });

                            },


                            changeMonth: true,
                            changeYear: false,
                            showWeek: true,
                            firstDay: 1,
                            yearRange: "c-100:c+15",
                            showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
                        })

但我收到此错误：

错误：无法获取未定义或空引用的属性“0”

如果我调试，我每次都会看到：

返回 [array.indexOf(string) == -1];

字符串是：29-06-2015。

这是完整的脚本：

; (function ($) {
    $(function () {
        $("form.xforms-form").bind({
            XForms_Enrich: function (e) {
                if ($.fn.datepicker) {
                    $("input.qmatic-dateslot", e.args.data).each(function () {
                        var inp = $(this);
                        if (inp.is(":disabled")) return;
                        var tabindex = inp.attr("tabindex");

                        var dateFormat = $.xforms.getProperty(inp, 'dateFormat') || 'd-M-yy';
                        dateFormat = dateFormat.replace(/m/g, '0').replace(/h/gi, '0').replace(/t/g, '').replace(/M/g, 'm').replace('yyyy', 'yy');

                        $("#" + inp.attr("id") + " ~ button.ui-datepicker-trigger").attr("tabindex", tabindex);

                        var clearBtn = $('<button class="ui-datepicker-clear" type="button" tabindex="' + tabindex + '">x</button>').click(function () { inp.val(''); inp.change(); return false; });
                        inp.after(clearBtn);

                        inp.datepicker({
                            dateFormat: dateFormat,
                            beforeShowDay: function (date) {                               

                                $("#form_one3 > option:gt(0)").each(function () {
                                    //alert(this.text + ' ' + this.value);
                                    //var array = ["2015-03-14", "2015-03-15", "2015-03-16"];This works :)
                                    var array = [this.Text].toString("yy-mm-dd");
                                    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                                    return [array.indexOf(string) == -1];
                                });

                            },


                            changeMonth: true,
                            changeYear: true,
                            showWeek: true,
                            firstDay: 1,
                            yearRange: "c-100:c+15",
                            showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
                        })
                    });
                    $("#ui-datepicker-div").hide();
                }
            }
        })
    })
})(jQuery);

它在这一行中断：

unselectable = (otherMonth && !selectOtherMonths) || !daySettings[0] ||
                            (minDate && printDate < minDate) || (maxDate && printDate > maxDate);

这是错误：

unable to get property 0 of undefined or null reference

我也试过这样：

 inp.datepicker({
                            dateFormat: dateFormat,
                            beforeShowDay: function (date) {                               

                                $("#form_one3 > option:gt(0)").each(function (key, value) {

                                    if (date == value.toString('d-M-yy')) {
                                        var array = [this.Text].toString("d-M-yy");
                                        var string = jQuery.datepicker.formatDate('d-M-yy', date);
                                        return [array.indexOf(string) == -1];
                                    }
                                    else {
                                        return 0;
                                    }
                                });

                            },


                            changeMonth: true,
                            changeYear: true,
                            showWeek: true,
                            firstDay: 1,
                            yearRange: "c-100:c+15",
                            showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
                        })

Answer 1

我假设您的代码基于this related question。我认为您想要做的是，在 beforeShowDay 中，检查日期是否是下拉列表中的任何日期。根据您的 jQuery 版本，您可以使用find() or filter()。我还认为您需要 format your date 以与您的选项文本相同的格式，在月份或日期中没有前导零，并且日期然后是月份然后是年份。

如果您使用的是 jQuery > 1.9，请尝试这样的操作：

beforeShowDay: function (date) {                               
    var dateString = jQuery.datepicker.formatDate('d-m-yy', date);
    return ($('#form_one3 option').filter(function () { return $(this).html() == dateString; }).length == 0);
}