我想将jquery UI日期选择器附加到同一页面上的多个输入。然后我希望每个日期选择器都有可单击的特定日期。似乎有效，但我为所有日期选择器获得相同的可选日期。
我的代码是这样的
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
})();
我找到了问题所在。我比较了错误的值。
我的日期格式在数据AVDATES和jQuery部分中不同。所以我像这样转换了jquery部分，它工作得很好
var dmy = "";
dmy += ("00" + (d.getMonth() + 1)).slice(-2) + "/";
dmy += ("00" + d.getDate()).slice(-2) + "/";
dmy += d.getFullYear();
谢谢大家的超快速帮助：-)
我假设您的页面上有多个具有lollydate类名的元素。 如果是这样，则lollydate变量的长度不止 1。
在each循环中，您使用lollydate.data设置beforeShowDay函数的变量，这并不精确。 尝试将其更改为$(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
});
在原始脚本中，您没有使用var限定$this范围，这导致$this始终是each循环中的最后一项。
您也不能使用.data("packid")，而是需要使用.attr("data-packid")。
此外，需要使用$this而不是lollydate。
修复这些问题后，脚本应按预期工作。 它甚至可能允许您删除data-packid属性，因为它似乎不再被使用。
编辑 2
这里有一个JSFiddle，如果你想看看我在行动中做了什么。
注意
我不得不在data-avdates属性中交换月份和日期。 不知道您要选择哪种日期格式。