強制jQuery UI Datepicker在下面的輸入字段中顯示

我有一個頁面，其中包含一個窗體和幾個字段。我的問題如下：強制jQuery UI Datepicker在下面的輸入字段中顯示

我想強制jQuery UI datepicker顯示在輸入字段下面。
當我點擊輸入字段時，我希望字段也滾動到頁面的頂部。我想我有這個工作。

這裏是我的jQuery：

JQUERY：

$(document).ready(function() { 
    // Set Datepicker 
    $(".datepicker").datepicker(); 

    $("input").focus(function() { 
     $('html, body').animate({ scrollTop: $(this).offset().top - 25 }, 10); 
    }); 

});

鏈接到一個小提琴： https://jsfiddle.net/MauriceT/0qfycgm1/10/

這裏是我想避免什麼：

Datepicker displays above the input field

任何建議將不勝感激。謝謝！

來源

2016-07-15 Maurice Twomey

下面的輸入是什麼意思？您是否希望輸入字段覆蓋日期選擇器？ – Deep

所以我需要日期選擇器來顯示下面的字段，不管是什麼。目前，如果您點擊日期選擇器並且字段上方有空格，則日期選擇器將出現在該字段上方。點擊我的問題圖片中的鏈接以獲得視覺效果。謝謝！ –

您可以通過設置日期選取器彈出窗口的CSS來實現您的目標。

使用下面的代碼來設置CSS，使用setTimeout是爲了避免重寫CSS。

我在這裏找到了上邊和左邊的日期時間選擇器的文本框，並使用這些值來設置日期時間選擇器彈出

論這裏beforeShow事件檢查信息的位置。

https://api.jqueryui.com/datepicker/#option-beforeShow

$(".datepicker").datepicker({ 
    beforeShow: function (input, inst) { 
     setTimeout(function() { 
      inst.dpDiv.css({ 
       top: $(".datepicker").offset().top + 35, 
       left: $(".datepicker").offset().left 
      }); 
     }, 0); 
    } 
});

這裏是小提琴：https://jsfiddle.net/0qfycgm1/14/

來源

2016-07-15 16:06:17 Deep

謝謝，深入！你是個天才！：） –

@MauriceTwomey不客氣:) – Deep

一個簡單的解決方法是使用CSS爲CALENDER Box調整前端。

將以下內容添加到您的CSS文件。

.ui-datepicker{ 
     margin-top: 300px; 
    }

我在你的小提琴鏈接中試過，工作得很好。

來源

2016-07-15 15:14:38

感謝您的迴應，Ankush！但是，我不確定這是一個強大的解決方案，因爲如果向下滾動頁面並選擇日期選擇器，日期選擇器將出現在字段下方300px。我需要更動態的東西。 –

從我所瞭解的情況來看，CALENDER框出現在日期選擇器輸入字段的上方，但您希望它顯示在其下方。是這樣嗎，還是你想要別的東西？ –

哦，我得到你提到的SCROLL問題。而且它在top margin：0px的情況下仍然存在，因此Jayanti Lal的解決方案也不能正常工作。 –

添加

 ui-datepicker{ 
      margin-top: 0px; 
      }

我加入這個代碼到你的小提琴，並已進行了測試。希望這會有所幫助。已更新您的fiddle

來源

2016-07-15 15:52:17

繼從jQuery的用戶界面 - 代碼行（版本）設置你的對象頂部位置是零，因此它顯示wrong.Comment的代碼行，你會得到你想要的。我花了很多天找到沒有比這更好的解決方案。

offset = $ .datepicker._checkOffset（inst，offset，isFixed）;

來源

2017-09-12 11:45:46

強制jQuery UI Datepicker在下面的輸入字段中顯示

回答

相關問題