Question

我想将jquery UI datepicker附加到同一页面上的多个输入。然后我希望每个日期选择器都可以点击某些日期。似乎工作但我得到所有日期选择器相同的可选日期。

我的代码就是这个

html 2个字段的示例代码

<input id="packid17" class="lollydate form_field_style" size="12" data-avdates17="12/01/2012,12/04/2012,12/08/2012,12/11/2012,12/15/2012,12/18/2012,12/22/2012,12/25/2012,12/29/2012,01/01/2013,01/05/2013,01/08/2013,01/12/2013,01/15/2013,01/19/2013,01/22/2013,01/26/2013,01/29/2013,02/02/2013,02/05/2013,02/09/2013,02/12/2013,02/16/2013,02/19/2013,02/23/2013,02/26/2013,03/02/2013,03/05/2013,03/09/2013,03/12/2013,03/16/2013,03/19/2013,03/23/2013,03/26/2013,03/30/2013,04/02/2013,04/03/2013,04/04/2013,04/06/2013,04/09/2013,04/10/2013,04/11/2013,04/13/2013,04/16/2013,04/17/2013,04/18/2013,04/20/2013,04/23/2013,04/24/2013,04/25/2013,04/27/2013,04/30/2013,05/01/2013,05/02/2013,05/04/2013,05/07/2013,05/08/2013,05/09/2013,05/11/2013,05/14/2013,05/15/2013,05/16/2013,05/18/2013,05/21/2013,05/22/2013,05/23/2013,05/25/2013,05/28/2013,05/29/2013,05/30/2013,06/01/2013,06/04/2013,06/05/2013,06/06/2013,06/08/2013,06/11/2013,06/12/2013,06/13/2013,06/15/2013,06/18/2013,06/19/2013,06/20/2013,06/22/2013,06/25/2013,06/26/2013,06/27/2013,06/29/2013,07/02/2013,07/03/2013,07/04/2013,07/06/2013,07/09/2013,07/10/2013,07/11/2013,07/13/2013,07/16/2013,07/17/2013,07/18/2013,07/20/2013,07/23/2013,07/24/2013,07/25/2013,07/27/2013,07/30/2013,07/31/2013,08/01/2013,08/03/2013,08/06/2013,08/07/2013,08/08/2013,08/10/2013,08/13/2013,08/14/2013,08/15/2013,08/17/2013,08/20/2013,08/21/2013,08/22/2013,08/24/2013,08/27/2013,08/28/2013,08/29/2013,08/31/2013,09/03/2013,09/04/2013,09/05/2013,09/07/2013,09/10/2013,09/11/2013,09/12/2013,09/14/2013,09/17/2013,09/18/2013,09/19/2013,09/21/2013,09/24/2013,09/25/2013,09/26/2013,09/28/2013,10/01/2013,10/02/2013,10/03/2013,10/05/2013,10/08/2013,10/09/2013,10/10/2013,10/12/2013,10/15/2013,10/16/2013,10/17/2013,10/19/2013,10/22/2013,10/23/2013,10/24/2013,10/26/2013,10/29/2013,10/30/2013,10/31/2013,11/02/2013,11/05/2013,11/09/2013,11/12/2013,11/16/2013,11/19/2013,11/23/2013,11/26/2013,11/30/2013" data-packid="17" type="text" name="date" value="">

<input id="packid23" class="lollydate form_field_style" size="12" data-avdates23="04/19/2013,04/22/2013,04/26/2013,04/29/2013,05/03/2013,05/06/2013,05/10/2013,05/13/2013,05/17/2013,05/20/2013,05/24/2013,05/27/2013,05/31/2013,06/03/2013,06/07/2013,06/10/2013,06/14/2013,06/17/2013,06/21/2013,06/24/2013,06/28/2013,07/01/2013,07/05/2013,07/08/2013,07/12/2013,07/15/2013,07/19/2013,07/22/2013,07/26/2013,07/29/2013,08/02/2013,08/05/2013,08/09/2013,08/12/2013,08/16/2013,08/19/2013,08/23/2013,08/26/2013,08/30/2013,09/02/2013,09/06/2013,09/09/2013,09/13/2013,09/16/2013,09/20/2013,09/23/2013,09/27/2013,09/30/2013,10/04/2013,10/07/2013,10/11/2013,10/14/2013,10/18/2013,10/21/2013,10/25/2013" data-packid="23" type="text" name="date" value="">

我的Jquery代码就是这个

(function(){
            var lollydate = $(".lollydate");

            lollydate.each(function(){
                $this = $(this);
                $this.datepicker({
                dateformat:'mm/dd/yy',
                showAnim : 'fold',
                changeMonth: true,
                changeYear: true,
                minDate:"-10d",
                maxDate: "+18M",
                beforeShowDay: function(d){
                    var dateid = lollydate.data('packid');
                    //console.log(dateid);
                     var datelist = lollydate.data('avdates'+dateid).split(",");
                    // normalize the date for searching in array
                    var dmy = "";
                    dmy += ("00" + d.getDate()).slice(-2) + "/";
                    dmy += ("00" + (d.getMonth() + 1)).slice(-2) + "/";
                    dmy += d.getFullYear();
                    if ($.inArray(dmy, datelist) >= 0) {
                        return [true, ""];
                    }
                    else {
                        return [false, ""];
                    }
                }
            });
            }); // end each




        })();

Answer 1

我假设您的页面上有多个lollydate类名称的元素。如果是这样，您的lollydate变量的长度不止一个。

在each循环中，您使用beforeShowDay设置lollydate.data函数的变量，这不准确。尝试将其更改为$(this)。

beforeShowDay: function(d){
    var dateid = $(this).data('packid');
    //console.log(dateid);
     var datelist = $(this).data('avdates'+dateid).split(",");
    // normalize the date for searching in array
    var dmy = "";
    dmy += ("00" + d.getDate()).slice(-2) + "/";
    dmy += ("00" + (d.getMonth() + 1)).slice(-2) + "/";
    dmy += d.getFullYear();
    if ($.inArray(dmy, datelist) >= 0) {
        return [true, ""];
    }
    else {
        return [false, ""];
    }
}

修改

$(function(){ var lollydate = $(".lollydate"); lollydate.each(function(){ var $this = $(this); $this.datepicker({ dateformat:'mm/dd/yy', showAnim : 'fold', changeMonth: true, changeYear: true, minDate:"-10d", maxDate: "+18M", beforeShowDay: function(d){ var dateid = $this.attr('data-packid'); //console.log(dateid); var datelist = $this.attr('data-avdates').split(","); // normalize the date for searching in array var dmy = ""; dmy += ("00" + d.getDate()).slice(-2) + "/"; dmy += ("00" + (d.getMonth() + 1)).slice(-2) + "/"; dmy += d.getFullYear(); if ($.inArray(dmy, datelist) >= 0) { return [true, ""]; } else { return [false, ""]; } } }); }); // end each });

在您的原始脚本中，您没有使用$this确定var，这导致$this始终是each循环中的最后一项。

您也无法使用.data("packid")，而是需要使用.attr("data-packid")。

此外，需要使用$this代替lollydate。

修复这些问题后，脚本应按预期工作。它甚至可能允许您删除data-packid属性，因为它似乎不再被使用了。

修改2

如果你想看看我在行动中做了什么，这是一个JSFiddle。

注意的

我必须在data-avdates属性中交换月和日。不知道你的目标是哪种日期格式。

Answer 2

我发现了问题所在。我在比较错误的价值观。

我的日期格式在data-avdates和jquery部分中并不相同。所以我像这样转换了jquery部分，它完美地工作了

 var dmy = "";
    dmy += ("00" + (d.getMonth() + 1)).slice(-2) + "/";
    dmy += ("00" + d.getDate()).slice(-2) + "/";
    dmy += d.getFullYear();

谢谢大家的超级快速帮助： - ）

将日期选择器分配给多个输入，并允许在每个输入中选择某些日期

2 个答案: