jQuery Datepicker - 根据它出现的位置添加类

时间:2011-06-10 07:46:35

标签: jquery jquery-ui datepicker

我需要在我的输入元素中添加一个“上方”或“下方”的类,具体取决于打开日期选择器的哪一侧。

我似乎无法弄清楚如何获取即将创建的关闭日期选择器实例的位置....也许我只是想错了。

     $('#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}})扩展它。因此它总是显示在下面,但我更喜欢保持其动态放置功能,但只是知道它的上方还是下方,所以我可以正确设置我的输入元素。

小事,但完成它会很好。

1 个答案:

答案 0 :(得分:3)

我认为这就是你要找的东西。

使用position而不是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');
    }
}