滚动时隐藏jQuery datepicker

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

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

其他想法？

尝试一下。获取输入字段的ID。

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

在下面使用此代码

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

其中" #scroll"是您应用滚动的DIV的ID。这将在滚动时自动隐藏datepicker。

查看此堆栈溢出答案

只是滚动到.datepicker.hide();

并在完成scrolling.

后将其显示回去

尝试这个，

<!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

您是否正在使用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();              
    });
});

您应该使用jQuery的scroll事件处理程序，例如So

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

作为http://api.jquery.com/scroll/（右下方）的示例。

编辑：

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

相关内容

最新更新

热门标签：