將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); 

    }});