javascript - Bootstrap datepicker is not aligning on hidden input field - Stack Overflow

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

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

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Apr 14, 2016 at 6:32 user3107283 asked Apr 14, 2016 at 6:29 user3107283user3107283 16111 gold badge44 silver badges1111 bronze badges 11

• Please share the live link/demo as it is related to html structure.. Thank you – Leo the lion Commented Apr 14, 2016 at 6:31
• What is the point ? Why do you want to attach it for hidden input.. – Rayon Commented Apr 14, 2016 at 6:32
• @Leothelionpls check this fidle jsfiddle/gZt3r I – user3107283 Commented Apr 14, 2016 at 6:33
• Try this - stackoverflow./a/20265818/4719761 – Developer107 Commented Apr 14, 2016 at 6:33
• @RayonDabre Sir, what is the point?? Actually I need to attach it to todaysdate div, once I click it on div then datepicker popup should point to particular div right?? But its pointing on top of the page – user3107283 Commented Apr 14, 2016 at 6:40

 |  Show 6 more ments

1 Answer 1

Sorted by: Reset to default 7

As mentioned in my ments. 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">