将jquery datepicker的位置设置为文本字段顶部

Question

jquery datepicker显示在测试字段下。有一段时间它会在文本字段的顶部。但我希望将datepicker始终显示在测试字段的顶部。怎么做？

Answer 1

You can try this : 


$('#txtDate').datepicker({ 
    beforeShow: function (textbox, instance) { 
      instance.dpDiv.css({ 
        marginTop: (-textbox.offsetHeight) + 'px', 
        marginLeft: textbox.offsetWidth + 'px' 
      }); 
    } 
}); 

Answer 2

使用您自己的风险...

.ui-datepicker { 
    position: relative !important; 
    top: -290px !important; 
    left: 0 !important; 
} 

http://jsfiddle.net/mXnjS/1/

您可能需要更新顶级像素，因为它取决于你的基本字体大小。

Answer 3

$('#StartDateIssued,#EndDateIssued,#StartDateFulFill,#EndDateFulFill').datepicker({ 
    beforeShow: function (input, inst) { 
     var offset = $(input).offset(); 
     var height = $(input).height(); 
     window.setTimeout(function() { 
      inst.dpDiv.css({ top: (offset.top + height - 20) + 'px', marginLeft: (input.offsetWidth) + 'px' }) 
     })}, 
    changeMonth: true, changeYear: true, constrainInput: true, 
    dateFormat: "dd-mm-yy", onSelect: function (dateText, inst) { 
     $('#StartDateIssued').valid(); 
     $('#StartDateIssued').val(dateText); 
    } 
}); 

Answer 4

jQuery的日期选择器的设计就像它不需要任何修改......只可以向左或向右移动通过在该日期选择器的CSS的变化，检查你的HTML版本，因为没有按日期选择器” T公司的支持HTML 5版.. HTML版本4支持

Answer 5

 $('#txtDate').datepicker({ 
    beforeShow: function (textbox, instance) { 
      instance.dpDiv.css({ 
        marginTop: (-textbox.offsetHeight) + 'px', 
        marginLeft: textbox.offsetWidth + 'px' 
      }); 
      } 
     }); 

如果你在一个页面中两个或两个以上datepickers，这个代码改变所有的人的位置。如果您需要单独改变每一个，你应该使用这个代码...

 beforeShow: function (input, inst) { 
     setTimeout(function() { 
      inst.dpDiv.css({ 
      top: 100, 
       left: 200 
     }); 
     }, 0); 
    } 

Answer 6

我试图用这个这个技巧，在原有基础上的jQuery UI的“_checkOffset”功能解决方法：

function datepickerInitDirectionReverse() { 
    // Store original method to be able to call it inside our overriding method. 
    $.datepicker._checkOffset_original = $.datepicker._checkOffset; 
    $.datepicker._checkOffset = function(inst, offset, isFixed) { 
     var dpHeight = inst.dpDiv.outerHeight(), 
      inputHeight = inst.input ? inst.input.outerHeight() : 0, 
      viewTop = isFixed ? 0 : $(document).scrollTop(); 
     offset = $.datepicker._checkOffset_original(inst, offset, isFixed); 
     // Try to reposition the datepicker on top of it, 
     // only if the option flag is set by the user 
     // and only if this has not already happened. 
     offset.top -= Math.min(
      offset.top, 
      (
       this._get(inst, "directionReverse") 
       && 
       (offset.top > inst.input.offset().top) 
       && 
       (offset.top - viewTop > dpHeight) 
      ) ? Math.abs(dpHeight + inputHeight) : 0 
     ); 
     return offset; 
    } 
} 

现在，你可以在每个元素的基础上进行如下配置定位偏好：

// Prefer datepicker to appear on top of input element (if room). 
$(element).datepicker({ 
    directionReverse: true 
}); 

// Prefer datepicker to appear on bottom of input element (if room). 
// This is the unchanged default behaviour. 
$(element).datepicker({ 
    directionReverse: false 
}); 

要注意的是上述可能在jQuery用户界面的未来版本打破，如果开发商决定改变接口。请让我知道是否会有任何副作用。

Answer 7

以下代码会将日历始终放在输入字段的顶部。

$('.txtDate').datepicker({ 
    beforeShow: function (textbox, instance) { 
     var txtBoxOffset = $(this).offset(); 
     var top = txtBoxOffset.top; 
     var left = txtBoxOffset.left; 
     var textBoxWidth = $(this).outerWidth(); 
     console.log('top: ' + top + 'left: ' + left); 
       setTimeout(function() { 
        instance.dpDiv.css({ 
         top: top-190, //you can adjust this value accordingly 
         left: left + textBoxWidth//show at the end of textBox 
       }); 
      }, 0); 

    }});