Jquery Zebra日期选择器和Spry验证-日期选择器图标位置未在表单提交时更新

所以，我使用的是Stefan Gabos的Zebra DatePicker插件，这是一个很棒的插件，我发现它与Spry验证不兼容-我知道，Spry验证有它的问题，但我仍然用它来实现这一点

因此，当表单提交时，由于错误消息，验证在没有任何值的情况下执行，它会使表单崩溃。没问题。问题在于DatePicker图标没有根据父元素或文本字段更新其位置。该插件的作者建议调用datepicker.update（），实现后不会产生任何结果

以下是我的js代码：

$(document).ready(function() {
$('input.datepicker').Zebra_DatePicker({
    format: 'M d, Y',                                      
    direction: true,
    disabled_dates: ['* * * 0,3,6']

});

    });

以下是html：

<input name="specific_date" type="text" class="datepicker" />

任何帮助都将不胜感激——我相信这是一个简单的解决方案，但就我的一生而言，我能找到任何有用的方法。提前谢谢

Zebra Datepicker文档中描述的似乎是正确的起点。到目前为止你试过什么？您应该将其绑定到要触发图标重新定位的任何事件。例如，每当调整浏览器窗口的大小时，这将更新图标位置：

$(window).resize(function () {
  var datepicker = $('#datepicker').data('Zebra_DatePicker');
  datepicker.update();
});

---

另一种解决方案是隐藏图标：

$(document).ready(function() {
 $('#datepicker').Zebra_DatePicker({"show_icon" : false});
});

然后，您可以使用CSS来恢复它（即在不使用Zebra Datepicker的情况下重新实现图标），这样就完全不需要更新它的位置

#datepicker{ 
 background-image: url('zebra_datepicker/calendar.png'); 
 background-position:98% 50%; 
 background-repeat:no-repeat; 
 cursor: pointer; 
}

---

对我来说，这似乎是最简单的设计（我不知道为什么斑马日期选择器图标通常通过JavaScript定位的设计原理）

我发现zebra datepicker有很好的用户界面，但我在输入框中日历图标的定位方面遇到了问题，尤其是当页面调整大小时。这是我的解决办法

html:

<div class='dob'>Date of Birth:</div><input type='text' id='hdob' value='' /><span class="dicon"></span>

$('#hdob').Zebra_DatePicker({"show_icon":false}); //plus any other parameters you need
$('.dicon').on('click', function(){$(this).prev().trigger('click'); });

.dicon{
background: url(/img/cal.png) no-repeat;
    background-size: cover;
    cursor: pointer;
    display: inline-block;
    float: left;
    margin-left: -2.8vmin;
    margin-top: 1vmin;
    min-height: 2.2vmin;
    min-width: 2.2vmin;
}
.dob {
display:inline-block;
 margin-right:0.6%
 min-height:2.6vmin;
 overflow: hidden;
 text-align:right;
 text-overflow: ellipsis;
 white-space: nowrap;
}

css:

<div class='dob'>Date of Birth:</div><input type='text' id='hdob' value='' /><span class="dicon"></span>

$('#hdob').Zebra_DatePicker({"show_icon":false}); //plus any other parameters you need
$('.dicon').on('click', function(){$(this).prev().trigger('click'); });

.dicon{
background: url(/img/cal.png) no-repeat;
    background-size: cover;
    cursor: pointer;
    display: inline-block;
    float: left;
    margin-left: -2.8vmin;
    margin-top: 1vmin;
    min-height: 2.2vmin;
    min-width: 2.2vmin;
}
.dob {
display:inline-block;
 margin-right:0.6%
 min-height:2.6vmin;
 overflow: hidden;
 text-align:right;
 text-overflow: ellipsis;
 white-space: nowrap;
}

---

cal.png图像为32x32像素，输入文本大小可根据需要调整

不确定Spry验证是否与问题相关？如果这个问题仅仅是关于斑马日期采集器的，那么这个问题可能会更清楚。实际上，我在斑马日期采集器网站的论坛上有人给了我一个解决方案，这个解决方案一直运作良好。谢谢你的回答。太好了-你应该用他们推荐的解决方案回答你自己的问题。或者链接到它。