Question

我可以在窗口检测输入偏移位置： input.getBoundingClientRect（）。顶部但我必须知道我的datepicker块（在输入之下或其上方）将更改它的类名。

Answer 1

我认为，抓住打开的日历框的位置的最佳方式是收听点击事件。从顶部捕获datepicker输入和datepicker日历框偏移位置。

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

步骤1：在DOM初始化$('#ui-datepicker-div')

之后捕获日历框

第2步：抓住点击进入日期选择器输入。

步骤3：从偏移顶部捕获两个（日历框和日期选择器输入）元素的位置。

步骤4：捕捉元素的位置后，您可以随意操纵动作类型。在这种情况下，我们添加了类，但您可以调用函数input.offsetTop <= calendarBox.offsetTop ? toUpFunction() : toDownFunction()

希望它有所帮助。

祝你好运！

Answer 2

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

如何在他的输入元素上检测jQuery UI datepicker的向上或向下方向？

2 个答案: