4

Jquery datepicker 显示在测试字段下。有时它会出现在文本字段的顶部。但我想始终在测试字段的顶部显示日期选择器。怎么做？

4

7 回答 7

9

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

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

   }});
于 2015-11-13T11:43:27.357 回答
1

使用风险自负...

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

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

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

于 2013-03-27T12:10:15.063 回答
1 
     $('#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);
    }
于 2014-02-05T07:37:35.743 回答
0

我尝试使用这个 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 中中断。另外请告诉我是否会有任何副作用。

于 2014-09-15T08:58:04.947 回答
0 
$('#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);
    }
});
于 2013-08-02T05:24:58.480 回答
0 
You can try this :


$('#txtDate').datepicker({
    beforeShow: function (textbox, instance) {
            instance.dpDiv.css({
                    marginTop: (-textbox.offsetHeight) + 'px',
                    marginLeft: textbox.offsetWidth + 'px'
            });
    }
});
于 2013-03-27T11:51:11.683 回答
-3

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

于 2014-02-04T12:18:07.047 回答