Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set jquery datepicker position to top of text field

Jquery datepicker shows at under the test field. Some time it will top of text field. But I want show the datepicker always in top of the test field. How to do it?

like image 938
Dinuka Thilanga Avatar asked Feb 18 '23 00:02

Dinuka Thilanga


1 Answers

The following code will position the calendar always on top of input field.

$('.txtDate').datepicker({
   beforeShow: function (textbox, instance) {
       var txtBoxOffset = $(this).offset();
       var top = txtBoxOffset.top;
       var left = txtBoxOffset.left;
       var textBoxWidth = $(this).outerWidth();
       console.log('top: ' + top + 'left: ' + left);
               setTimeout(function () {
                   instance.dpDiv.css({
                       top: top-190, //you can adjust this value accordingly
                       left: left + textBoxWidth//show at the end of textBox
               });
           }, 0);

   }});
like image 74
Kamran Avatar answered Mar 04 '23 00:03

Kamran