1

我想将 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




        })();
4

2 回答 2

0

我假设您的页面上有多个具有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属性中的月份和日期。不知道您的目标是哪种日期格式。

于 2012-12-22T17:02:14.733 回答
0

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

我的日期格式在 data-avdates 和 jquery 部分中不一样。所以我像这样转换了jquery部分并且它工作得很好

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

谢谢大家的超级快速帮助:-)

于 2012-12-22T17:30:15.267 回答