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

本文关键字:日期 下拉列表 选择器 | 更新日期: 2023-09-27 18:04:20

我有一个包含日期的下拉列表。我可以在jquery中迭代日期。但我也有一个日期选择器,我想在日期选择器中禁用下拉列表中的日期。

dropdownlist的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不再工作。

那么把每个函数放在哪里,这样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">

如果我调试,我每次都会看到:

return[array.indexOf(string(==-1];

字符串为:2015年6月29日。

这是完整的脚本:

; (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"
                        })

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

我假设您的代码是基于这个相关的问题。我想你想做的是,在ShowDay之前,检查日期是否是你下拉列表中的任何日期。根据您的jQuery版本,您可以使用find((或filter((。我还认为你需要将日期的格式与选项文本的格式相同,月份或日期中没有前导零,然后是日期,然后是月份,然后是年份。

如果您使用的是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);
}