javascript - 如何在 Datepicker 中将 beforeShowDay 与 foreach 一起使用

Question

我有一个日期选择器和一个包含日期值的下拉列表。下拉列表中的日期必须在日期选择器中禁用，我尝试这样:

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

                                $("#form_one3 > option:gt(0)").each(function (indx, option) {
                                    var v = [$(this).text()];
                                    //alert(array);

                                    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
                                    for (i = 0; i < v.length; i++) {
                                        if ($.inArray(y + '-' + (m + 1) + '-' + d, v) != -1) {
                                            var string = jQuery.datepicker.formatDate(dateFormat, date);
                                            return [v.indexOf(string) == -1];
                                        }
                                    }
                                    return [true];


                                });

                            },


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

我现在是这样的:

; (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) {
                                var dt = $.datepicker.formatDate('d-m-yy', date)
                                return [$('#form_one3 > option:gt(0)[value="' + dt + '"]').length == 0];
                            },
                            //beforeShowDay: function (date) {                              

                            //    $("#form_one3 > option:gt(0)").each(function (indx, option) {
                            //        var v = [$(this).text()];
                            //        //alert(array);

                            //        var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
                            //        for (i = 0; i < v.length; i++) {
                            //            if ($.inArray(y + '-' + (m + 1) + '-' + d, v) != -1) {
                            //                var string = jQuery.datepicker.formatDate(dateFormat, date);
                            //                return [v.indexOf(string) == -1];
                            //            }
                            //        }
                            //        return [true];


                            //    });

                            //},


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

但所有日期都是可选择的。例如:24-7-2015 在下拉列表中

这是完整的输出:

            (Selecteer datum)
                  </option>
<option value="2015-07-24T00:00:00Z">24-7-2015</option>
<option selected="selected" value="2015-07-27T00:00:00Z">27-7-2015</option>
<option value="2015-07-28T00:00:00Z">28-7-2015</option>
<option value="2015-07-29T00:00:00Z">29-7-2015</option>
<option value="2015-07-30T00:00:00Z">30-7-2015</option>
<option value="2015-07-31T00:00:00Z">31-7-2015</option>
<option value="2015-08-03T00:00:00Z">3-8-2015</option>
<option value="2015-08-04T00:00:00Z">4-8-2015</option>
<option value="2015-08-05T00:00:00Z">5-8-2015</option>
<option value="2015-08-06T00:00:00Z">6-8-2015</option>
<option value="2015-08-07T00:00:00Z">7-8-2015</option>
<option value="2015-08-10T00:00:00Z">10-8-2015</option>
<option value="2015-08-11T00:00:00Z">11-8-2015</option>
<option value="2015-08-12T00:00:00Z">12-8-2015</option>
<option value="2015-08-13T00:00:00Z">13-8-2015</option>
<option value="2015-08-14T00:00:00Z">14-8-2015</option>
<option value="2015-08-17T00:00:00Z">17-8-2015</option>
<option value="2015-08-18T00:00:00Z">18-8-2015</option>
<option value="2015-08-19T00:00:00Z">19-8-2015</option>
<option value="2015-08-20T00:00:00Z">20-8-2015</option>
<option value="2015-08-21T00:00:00Z">21-8-2015</option>
</select></div>

好吧，我改成这样:

好吧，我改成这样:

 beforeShowDay: function (date) {
                                var dt = $.datepicker.formatDate('yy-mm-dd', date)
                                return [$('#form_one3 > option:gt(0)[value="' + dt + 'T00:00:00Z"]').length == 0];
                            },

这有效!但我想启用下拉列表中的日期并禁用所有其他日期。

Answer 1

你可以尝试类似的事情

inp = $('input')

inp.datepicker({
  dateFormat: 'dd M Y',
  beforeShowDay: function(date) {
    var dt = $.datepicker.formatDate('d-m-yy', date)
    return [$('#form_one3 > option:gt(0)[value="' + dt + '"]').length == 0];
  },
  changeMonth: true,
  changeYear: true,
  showWeek: true,
  firstDay: 1,
  yearRange: "c-100:c+15",
  showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

<input />
<select id="form_one3">
  <option></option>
  <option value="3-7-2015">3-7-2015</option>
  <option value="10-7-2015">10-7-2015</option>
  <option value="15-7-2015">15-7-2015</option>
  <option value="19-7-2015">19-7-2015</option>
  <option value="28-7-2015">28-7-2015</option>
  <option value="30-7-2015">30-7-2015</option>
</select>