CODEWITHSUNDEEP
jqueryjquery-uidatepicker
Nanowatt
Nanowatt

Reputation: 33

Change Jquery UI datepicker positioning to top

So I wanted my date picker to be on top of input and i got this code, which is working on jsfiddle but when I run it on my own, nothing happens. Can you tell me if something is wrong?

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $("#datepicker").datepicker({
    beforeShow: function (input, inst) {
        setTimeout(function () {
            inst.dpDiv.css({
                top: -200,
                left: 100
            });
        }, 0);
    }
});
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>

Upvotes: 0

Views: 1451

Answers (2)

Kamran
Kamran

Reputation: 4100

I am a little late to answer this question but may be I hope it helps some one else. 

 $('.txtDate').datepicker({
       beforeShow: function (textbox, instance) {
           var txtBoxOffset = $(this).offset();
           var top = txtBoxOffset.top;
           var left = txtBoxOffset.left;
           //console.log('top: ' + top + 'left: ' + left);
                   setTimeout(function () {
                       instance.dpDiv.css({
                           top: top-190,
                           left: left
                   });
               }, 0);

       }

Upvotes: 0

j08691
j08691

Reputation: 207891

jsFiddle loads jQuery on window load by default. You either need to wrap your code in a document ready call:

$(document).ready(function () {
    $("#datepicker").datepicker({
        beforeShow: function (input, inst) {
            setTimeout(function () {
                inst.dpDiv.css({
                    top: -200,
                    left: 100
                });
            }, 0);
        }
    });
})

or run it after the elements exist in the page by moving your code to the end of the page before the closing body tag.

Upvotes: 2

Related Questions