2

所以，我正在使用来自 Stefan Gabos 的 Zebra DatePicker 插件，它是一个很棒的插件，我发现它与 Spry Validation 不兼容 - 我知道，Spry Validation 有它的问题，但是，我就是这样用来让它工作。

所以，发生的事情是，当表单提交时，验证在没有任何值的情况下执行，由于错误消息，它会使表单崩溃。没问题。问题在于 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" />

任何帮助将不胜感激 - 我确信这是一个简单的解决方案，但对于我的生活，我可以找到任何有用或有帮助的东西。提前致谢！

4

3 回答 3

5

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

$(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; 
}

对我来说，这似乎首先是更简单的设计（我不知道为什么 Zebra Datepicker 图标通常通过 JavaScript 定位的设计原理）。

于 2012-11-13T13:47:58.943 回答
3

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

$(window).resize(function () {
  var datepicker = $('#datepicker').data('Zebra_DatePicker');
  datepicker.update();
});
于 2012-11-13T12:19:06.067 回答
0

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

html:

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

javascript/jquery：

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

CSS：

.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 像素，输入文本可根据需要调整大小

于 2018-06-27T16:04:07.350 回答