如何檢測向上或向下方向jQuery UI日期選擇器在他的輸入元素？

Question

我可以檢測窗口上的輸入偏移位置： input.getBoundingClientRect（）。top 但是我必須知道我的datepicker塊（在輸入或其上方）將其更改爲class-name。

Answer 1

beforeShow: function (input, inst) { 
    var instHeight = 0; 

    setTimeout(function() { 
     instHeight = inst.dpDiv.height(); 
     if(input.getBoundingClientRect().top < instHeight) { 
     inst.dpDiv 
      .removeClass('ui-top') 
      .addClass('ui-bottom') 
      .position({ 
      my: 'left top+5', 
      at: 'left bottom', 
      collision: 'none', 
      of: input 
      }) 
     } else { 
     inst.dpDiv 
      .removeClass('ui-bottom') 
      .addClass('ui-top') 
      .position({ 
      my: 'left bottom-5', 
      at: 'left top', 
      collision: 'none', 
      of: input 
      }) 
     } 
    },0); 
    }, 

Answer 2

我認爲，捕捉打開的日曆盒位置的最佳方法是聆聽點擊事件。在從頂部捕獲日期選擇器輸入和日期選擇器日曆框偏移位置之後。

There is an jsfiddle example for how to use with multiple datepickers

步驟1：捕捉日曆盒，DOM初始化後$('#ui-datepicker-div')

步驟2：CATCH點擊日期選擇器輸入。

第3步：從偏移頂部捕捉兩個（日曆框和日期選擇器輸入）元素的位置。

第4步：捕捉元素的位置後，您可以操縱任何想要的動作類型。在這種情況下，我們添加類，但你可以調用一個函數，input.offsetTop <= calendarBox.offsetTop ? toUpFunction() : toDownFunction()

希望它有幫助。

祝你好運！