Question

如何在滚动页面时隐藏JQuery日期选择器？我已经尝试过这段代码了

.datepicker._pos[1] += input.offsetHeight + document.body.scrollTop;

还有其他想法吗？

Answer 1

看看这个stack overflow answer

当你滚动到.datepicker.hide();

时

完成scrolling.

后再显示

Answer 2

试试这个。获取输入字段的ID。

eg.  var txtestimatestartdate = $('#txtestimatestartdate').datepicker();

使用以下代码

 $("#Scroll").scroll(function () {
    txtestimatestartdate.datepicker('hide');
    $('#txtestimatestartdate').blur();             
});

其中'#Scroll'是您已应用滚动的div的Id。这将在滚动时自动隐藏日期选择器。

Answer 3

试试这个，

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scroll demo</title>
  <style>
  div {
    color: blue;
  }
  p {
    color: green;
  }
  span {
    color: red;
    display: none;
  }
  </style>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 <p>Date: <input type="text" id="datepicker"></p>
<div>Try scrolling the iframe.</div>

<p>Paragraph - <span>Scroll happened!</span></p>

<script>

$( "#datepicker" ).datepicker();
$( window ).scroll(function() {
  $( "#datepicker" ).datepicker('hide');
  $( "span" ).css( "display", "inline" ).fadeOut( "slow" );
});
</script>

</body>
</html>

此处的演示链接http://jsbin.com/ahEYeWe/1/edit

Answer 4

您使用的是jQuery UI datepicker吗？

如果是这样的话，我已经为你做了一个jsfiddle。在这里我已经做到了这一点，当滚动时，datepicker消失了，但我也完成了它，以便焦点离开输入。

我这样做是因为当您向上滚动到输入字段并再次单击它时，datepicker将重新出现，因为如果输入字段仍然具有前一次单击的焦点，则不会发生这种情况。

http://jsfiddle.net/4yaMd/

$(document).ready(function () {
    $("#datepicker").datepicker();
    $(window).bind('scroll',function () {
       $('#datepicker').blur();
       $("#ui-datepicker-div").hide();              
    });

});

Answer 5

您应该使用jquery的scroll事件处理程序，如此

$(window).scroll(function() {
 $('.datepicker').hide().fadeIn(800);
}

正如http://api.jquery.com/scroll/（右下角）的例子似乎指出的那样。

编辑：

它有效。 http://jsfiddle.net/x3s7F/

滚动时隐藏jquery datepicker

5 个答案: