Bootstrap datepicker does not update properly

Question

I have a table, each line has a button which opens a Bootstrap Popover, containing 2 Bootstrap Datepicker controls. They work seemingly well enough when I click on the calendar or on the input field, they open, I can choose a new date, and it gets properly displayed.

The problem is that although I can see the proper values in the input field, I can't access those by any means that I know.

$('#<ID of the input>').val()

shows the original value, what it had when I loaded the page. I tried to use the browser's inspector, to make sure there is no duplicate ID, and the original input has not been replaced by the Datepicker, but seemingly all is OK.

Using the getDate method of the Datepicker gives a similar result, it does always return the original value no matter how many time I change it.

How can I get the currently set value with jQuery?

Can you add your code which your using for assign bootstrap datepicker. — Jay, May 22 '17 at 02:47
while I was preparing the fiddle to answer, I found the problem... :) — Mkoch, May 22 '17 at 13:21

score 0 · Accepted Answer · answered May 22 '17 at 13:33

The problem was that I initialised the popover in the following way:

<div id="popoverCnt" style="display:none;">
    ... content ...
    <div class="input-group date" data-provide="datepicker" id="date_1" data-date-format="yyyy-mm-dd">
        <input class="form-control" name="dateval1" id="dateval1" type="dateISO" required placeholder="yyyy-mm-dd">
        <div class="input-group-addon">
            <span class="glyphicon glyphicon-th"></span>
        </div>
    </div>
    ... more content ...
</div>

<a tabindex="1" data-toggle="popover" id="pop1">Open popover</a>

<script>
    $("#pop1").popover({
        html: true,
        placement: 'bottom',
        trigger: 'click',
        content: function () {
            return $('popoverCnt').html();
        }
    });
</script>

Meaning that the content of the popover was loaded from the existing, but not displayed <div>. Therefore the datepicker got attached in a strange way - it displays correctly but the selected value is written to the duplicate, invisible div's input.

Since the display:none;, the duplicate inputs were not visible in the inspector.

Changing the <div> tag to <template> for the popoverCnt solved the issue immediately.

Bootstrap datepicker does not update properly

1 Answers1