Jquery DatePicker显示在其他常规页面元素的后面 [英] Jquery DatePicker shows up behind other regular page elements

问题描述

我有一个由别人实施的日期选择器的麻烦。我试图在我的网站上实现代码，但它不工作。下面是Javascript 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（）真正做除了调用focus on jQuery（this）.find（'input：text'）。focus（）;

B）datepicker与.with-datepicker 显示在页面上其他元素的后面，当我尝试点击日期选择器时，它会消失并且不选择日期。

一些更多的信息你是我使用这与联系表7有一个文本框，你可以点击激活日期选择器。这部分似乎工作确定。日期选择器显示在显示选择日期的输入框下方。问题是datepicker类是在其他元素如单选按钮后面。

我也试过在 input.focus code>

  $（this）.parent（）。css（'position'，'relative'）; 
 $（this）.parent（）。css（'z-index'，3000）; 
  

下面是它在页面上的显示效果的链接：


解决方案

确保您的 DatePicker 有 position：absolute; p>



而且包装应该有 position：relative; ，
其他子元素不应该有相对定位。

您的问题是找到正确的父，并给出正确的 z-index 到活动DatePicker。

I am having a trouble with a date picker implemented by someone else. I tried to implement the code on my website but it's not working. Below is the Javascript 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();
        })
    })
}

So my issue is 2 fold.
A) I don't understand what input.focus() is really doing other than calling focus on jQuery(this).find('input:text').focus();
B) The datepicker with the class of ".with-datepicker" shows up behind other elements on the page, and when I try to click on the datepicker it goes away and does not select a date.

A little more information to give you is I am using this with Contact Form 7 which has a text box you can click on to activate the date picker. That part seems to work ok. The datepicker literally shows up right below the input box that displays "pick a date". The problem is the datepicker class is behind other elements such as radio buttons.

I also tried doing this after input.focus();

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

Below is a link to how it looks on the page:

解决方案

Make sure your DatePicker has position: absolute;

And wrapper should have position: relative;, other child elements of it should Not have relative positioning.

Your problem is in finding the correct parent, and giving correct z-index to the Active DatePicker.

这篇关于Jquery DatePicker显示在其他常规页面元素的后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！