滚动时隐藏jquery datepicker答案

【问题标题】：hide jquery datepicker while scrolling滚动时隐藏jquery datepicker
【发布时间】：2014-02-21 04:11:03
【问题描述】：

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

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

还有其他想法吗？

【问题讨论】：

标签： jquery asp.net-mvc-4

【解决方案1】：

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

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

使用下面的代码

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

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

【讨论】：

【解决方案2】：

看看这个stack overflow answer

就在您滚动到.datepicker.hide();时

完成后显示回来scrolling.

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

你在使用 jQuery UI 日期选择器吗？

如果是这样，我在下面为你做了一个 jsfiddle。在这里，我已经做到了，以便在滚动日期选择器时消失，但我也这样做了，以便焦点离开输入。

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

http://jsfiddle.net/4yaMd/

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

});

【讨论】：

【解决方案5】：

你应该使用 jquery 的 scroll 事件处理程序，像这样

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

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

编辑：

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

【讨论】：