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

Please share the live link/demo as it is related to html structure.. Thank you — Leo the lion, Apr 14 '16 at 06:31
What is the point ? Why do you want to attach it for `hidden` input.. — Rayon, Apr 14 '16 at 06:32
@Leothelionpls check this fidle http://jsfiddle.net/gZt3r/ I — user3107283, Apr 14 '16 at 06: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, Apr 14 '16 at 06:40
@Developer107 Sir, I have checked that link, and changed orientation also BUT nothing is working — user3107283, Apr 14 '16 at 06:42
Make sure the parent of the datepicker has `position: relative` - that's what it attaches to, on a hidden element tho I'm not so sure but try it — StudioTime, Apr 14 '16 at 06:46
@DarrenSweeneyYes I have tried with positions.. but no luck sir.. still same problem.. — user3107283, Apr 14 '16 at 06:52
You can set desired style properties using `beforeShow` callback. Refer this demo - http://jsfiddle.net/Bhumika107/gZt3r/13/ — Developer107, Apr 14 '16 at 07:08
@user3107283 if you hide a element it has no spac eon the DOM and you are applying plugin to this hidden element. and the datepicker will open where ever this element is.. since the element has no place in the DOM the plugin will default the position of the picker to top 0 left 0.. — Rajshekar Reddy, Apr 14 '16 at 07:19

Rajshekar Reddy · Accepted Answer · 2019-03-14T14:31:28.873

7

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

edited Mar 14 '19 at 14:31

answered Apr 14 '16 at 07:31

Rajshekar Reddy

18,647
3
40
59

working like a charm.. Thanks Reddy garu.. Nice point out BUT in the bootstrap inline example they have mentioned text="hidden" only and one more thing, shall we update selected date to div text ?? on changeDate event like this $('#todaysDate').text(ev.format('dd-mm-yyyy')); – user3107283 Apr 14 '16 at 08:34
1

got working and got date value with this $('#datepicker').val() and asigned with div $('#todaysDate').text( $('#datepicker').val()); – user3107283 Apr 14 '16 at 08:42
@user3107283 oh nice!! And glad I could help you :) – Rajshekar Reddy Apr 14 '16 at 09:23
its hidden but its taking up space on the UI – aj go Jul 19 '22 at 14:33
nvm, its just with the styles in my css class that makes those space. Thank you! – aj go Jul 19 '22 at 14:52

Bootstrap datepicker is not aligning on hidden input field

1 Answers1