jQuery Datepicker - 根据它出现的位置添加类 [英] jQuery Datepicker - add class depending on where it appears
问题描述
我需要根据日期选择器在哪一侧打开,向我的输入元素添加一个上方"或下方"类.
我似乎无法弄清楚如何获取即将创建的日期选择器实例的位置......也许我只是想错了.
$('#order-main .datepicker').datepicker({showOn: '两者',buttonImage: 'img/icons/calendar.png',buttonImageOnly:真,最小日期:-1,最大日期:+1Y",显示按钮面板:真,showAnim: 'slideDown',hideIfNoPrevNext: 真,dateFormat: 'yyyy-mm-dd',持续时间:500,beforeShow:函数(输入,inst){var pos = $(input).offset().top;//如果要创建的实例的顶部位置是 <最高位置//元素的,它在上面,因此在上面添加,否则在下面添加.inst.dpDiv.addClass('above')}});
我知道如何使用 $.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}}) 扩展它;所以它总是会显示在下方,但我更愿意保留其动态放置功能,但只知道它是上方还是下方,这样我就可以正确设置输入元素的样式.
小事,但做完就好了.
我认为这就是您要找的.p>
使用位置而不是偏移量.
beforeShow: function(input, inst) {如果 (inst.dpDiv.position().top > $(input).position().top) {inst.dpDiv.removeClass('下面').addClass('上面');} 别的 {inst.dpDiv.removeClass('上面').addClass('下面');}}
I need to add a class "above" or "below" to my input element depending on which side the datepicker opened on.
I just can't seem to figure out how to get the position of the datepicker instance that's ABOUT to be created.... maybe im just thinking about it wrong.
$('#order-main .datepicker').datepicker({
showOn: 'both',
buttonImage: 'img/icons/calendar.png',
buttonImageOnly: true,
minDate: -1,
maxDate: "+1Y",
showButtonPanel: true,
showAnim: 'slideDown',
hideIfNoPrevNext: true,
dateFormat: 'yyyy-mm-dd',
duration: 500,
beforeShow: function(input, inst) {
var pos = $(input).offset().top;
// if the top position of the to-be-created instance is < top position
//of the elemnt, its ABOVE, therefore add above, otherwise add below.
inst.dpDiv.addClass('above')
}
});
I know how to extend it using $.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}}); so it'll always show below, but I would prefer to keep its dynamic placement functionality, but just KNOW whether its above or below, so i can style my input element properly.
Small thing, but it'd be nice to get done.
I think this is what you are looking for.
Use position instead of offset.
beforeShow: function(input, inst) {
if (inst.dpDiv.position().top > $(input).position().top) {
inst.dpDiv
.removeClass('below')
.addClass('above');
} else {
inst.dpDiv
.removeClass('above')
.addClass('below');
}
}
这篇关于jQuery Datepicker - 根据它出现的位置添加类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!