Bootstrap datepicker is not aligning on hidden input field

Question

Hi I am trying inline bootstrap datepicker on div tag, whenever I click on div tag, datepicker popup is displaying on start of page(left=0, top=0)

Div click is on todays date, I want to get the date and change the todays date text.

  <input type="hidden" id="datepicker" 
     data-provide='datepicker' 
     data-date-container='#todaysDate'>

<div id="todaysDate" class="trigger" 
   style="text-align: center; padding-top: 10px;
      font-weight: bold; color: #f58125; font-size: 16px;">

and also I have tried with below code also

form class="form-date" role="form">
        <div class="form-group" id="datepickid">
    <div id="todaysDate" class="trigger"style="text-align: center;
       padding-top: 10px; font-weight: bold; color: #f58125; 
      font-size: 16px;">
            </div>
    <input type="hidden" name="dt_due" id="datepicker">
 </div>
</form>

Jquery code

$(".trigger").click(function(){

        $( "#datepicker" ).datepicker({ format: 'dd-mm-yyyy',
            startDate: '01/01/1900',
            endDate: '12/30/2099',
            ignoreReadonly: true
        }).on('changeDate', function(ev){ 
            $('#todaysDate').text(ev.format('dd-mm-yyyy'));
            $("#datepicker").datepicker('hide'); 
        });  

         $("#datepicker").datepicker("show"); 
  });

both have the same problem.

whats wrong with code? Please anybody help me

Answer 1

As mentioned in my comments. You are Hiding the input element in the UI, So now it does not have any space on the UI, And you are applying the date-picker plugin to this hidden input element. The plugin applies fine, But the internal logic of the plugin is to open up the date picker right at the position where the element is placed in the UI, But the problem is your element does not have any position in the UI, So the plugin defaults the position of the picker to be top:0 and left:0

Solution: Instead of having type="hidden" you can use style="visibility:hidden" . This will make sure the element occupies some space on the UI and then the picker will also open at this position.

Working Fiddle.

Your input should be like below.

<input type="text" id="datepicker" style="visibility:hidden">