0

How to hide JQuery date picker while scrolling the page? Already I tried with this code

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

Any other ideas?

RameshC
  • 3
  • 1
  • 3

5 Answers5

3

Try this. Get the Id of the input field.

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

Use this below code

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

Where '#Scroll' is the Id for the div which you have applied scrolling. This will automatically hide the datepicker while scrolling.

Arun
  • 83
  • 4
1

Look at this stack overflow answer

Just when you are scrolling to .datepicker.hide();

And show it back when done scrolling.

Community
  • 1
  • 1
Bjorn Vdkerckhove
  • 745
  • 8
  • 21
0

Try this,

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

Demo link here http://jsbin.com/ahEYeWe/1/edit

dhana
  • 6,487
  • 4
  • 40
  • 63
0

Are you using the jQuery UI datepicker?

If so I've done a jsfiddle for you below. Here I have made it so that when scrolling the datepicker disappears, but also I have done it so that the focus leaves the input.

I have done this so than when you scroll back up to the input field and you click on it again the datepicker will re-appear as this wouldn't happen if the input field still had focus from the previous click.

http://jsfiddle.net/4yaMd/

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

});
Dan
  • 340
  • 3
  • 12
0

You should use jquery's scroll event handler, like so

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

As the example on http://api.jquery.com/scroll/ (right at the bottom) seems to point out.

Edit:

And it works. http://jsfiddle.net/x3s7F/.

loveNoHate
  • 1,549
  • 13
  • 21