从datepicker中的dropdownlist中禁用日期

时间:2015-07-23 13:21:58

标签: c# jquery asp.net-mvc datepicker

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

下拉列表的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再也无法工作了。

谢谢

如果我在$("#form_one3 > option:gt(1)").each(function () {

之间beforeShowDay: function (date) {

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

但是我收到了这个错误:

错误:无法获得属性&#39; 0&#39;未定义或空引用

如果我调试我每次看到:

return [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"
                        })

1 个答案:

答案 0 :(得分:0)

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

如果你使用的是jQuery&gt;请尝试这样的事情。 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);
}