Jquery DatePicker出現在其他常規頁面元素的後面

我遇到了由別人實現的日期選擇器的問題。我試圖在我的網站上實現代碼，但它不起作用。以下是JavaScript DatePickerJquery DatePicker出現在其他常規頁面元素的後面

// init datepicker 
function initDatepicker(){ 
    jQuery('.with-datepicker').each(function(){ 
     var hold = jQuery(this); 
     var input = hold.find('input:text'); 
     var opener = hold.find('.btn'); 
     input.datepicker({ 
      showOtherMonths: true 
     }) 
     opener.bind('click', function(e){ 
      input.focus(); 
      e.preventDefault(); 
     }) 
    }) 
}

所以我的問題是2倍。
A）我不明白什麼input.focus（）實際上是做除了調用重點jQuery(this).find('input:text').focus();
乙）日期選擇器「當我嘗試點擊日期選擇器時，它會消失並且不會選擇日期。

更多的信息給你是我用這個聯繫表格7有一個文本框，你可以點擊激活日期選擇器。這部分似乎工作正常。日期選擇器直接顯示在顯示「選擇日期」的輸入框下方。問題是datepicker類是其他元素（如單選按鈕）的後面。

我也試過之後input.focus();

$(this).parent().css('position', 'relative'); 
$(this).parent().css('z-index', 3000);

下面這樣做是一個鏈接到它的外觀在頁面上：

來源

2014-03-19 camdixon

確保您的DatePicker有position: absolute;

和包裝應該有position: relative;, 其他子元素它應該沒有relative定位。

你的問題是找到正確的父母，並給Active DatePicker提供正確的z-index。

來源

2014-03-19 17:26:59

你選擇塊是什麼意思？ – camdixon

我的意思是標籤，你必須單擊，以顯示DatePicker。在這裏，例如'Event Date 1st Choice'按鈕。 **每個**對這樣的按鈕和Datepicker應該有**一個父**。 **或者**您可以在「button」塊內放置Datepicker（'position：absolute;'），並使用'position：relative;'來解決您的問題。 –

給position:absolute的日期選擇器元素和position:relative到日期選擇器的父元素元件

來源

2014-03-19 17:14:50 James

我只是嘗試這樣做，並沒有爲我工作。 $（this）.parent（）。css（'position'，'relative'）; $（this）.css（'position'，'absolute'）; $（this）.css（'z-index'，3000）; – camdixon

將其應用於樣式表。 – James

哦，你的意思是在CSS而不是jQuery中做這件事 – camdixon

我解決，只是用CSS

.ui-datepicker { z-index: 10000 !important; }

來源

2017-10-11 06:25:58

Jquery DatePicker出現在其他常規頁面元素的後面

回答

相關問題