Disable dates from dropdownlist in datepicker

Question

I have a dropdownlist with dates. And I can iterate through the dates in jquery. But I also have a datepicker and I want to disable the dates from the dropdownlist also in the Datepicker.

The id of dropdownlist is: #form_one3.

and the javascript is this:

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

if I do this:

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

I see all the dates from the dropdownlist.

but the complete javascript file gives only empty values and the datePicker doenst work anymore.

Thank you

If I do $("#form_one3 > option:gt(1)").each(function () { between the beforeShowDay: function (date) {

The DatePicker doesnt work anymore.

So where to put the .each funtion then, so the Datepicker will work.

Thank you

The format is like this:

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

I have it now like this:

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

But I get this error:

Error: Unable to get property '0' of undefined or null reference

and if I debug I see every time that:

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

string is : 29-06-2015.

this is the complete script:

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

it breaks on this line:

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

and this is the error:

unable to get property 0 of undefined or null reference

I also tried like this:

 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

I assume you are basing your code on this related question. I think what you want to do is, in beforeShowDay, check if the date is any of the dates in your drop down. Depending on your version of jQuery, you can use either find() or filter(). I also think you need to format your date in the same format as your option text, with no leading zeroes in month or date and with the day then month then year.

Try something like this if you are using 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);
}