Question

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

Answer 1

以下代码将日历始终位于输入字段的顶部。

$('.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);

   }});

Answer 2

使用风险自负......

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

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

您可能需要更新顶部px，因为它取决于您的基本字体大小。

Answer 3

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

如果您在一个页面中有两个或更多日期选择器，则此代码会更改所有这些代码的位置。如果您需要单独更改每个，您应该使用此代码...

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

Answer 4

You can try this :


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

Answer 5

$('#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 6

我尝试使用此hack解决此问题，基于原始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 UI可能会中断。如果有任何副作用，请告诉我。

Answer 7

jquery datepicker的设计就像它不需要任何更改...只有通过在datepicker的css中进行更改才能向左或向右移动...检查你的html版本，因为datepicker不支持html版本支持5 .. html版本4

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

7 个答案: