jQuery Datepicker - 根据显示的位置添加类 [英] jQuery Datepicker - add class depending on where it appears

问题描述

我需要添加一类的上方或下方，以根据所述日期选择器开哪一侧上我的输入元件。

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')
         }
    });

我知道如何使用$ .extend（$。datepicker，{_ checkOffset：function（inst ，offset，isFixed）{return offset}}）;所以它会始终显示在下面，但我宁愿保持它的动态位置的功能，但只知道其是否高于或低于，这样我就可以正常样式我的input元素。

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.

使用位置而不是偏移。

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屋！