Bootstrap 日期选择器未正确更新

Question

我有一个 table，每行都有一个按钮，可以打开一个 Bootstrap Popover，包含 2 个 Bootstrap Datepicker 控件。当我单击日历或输入字段时，它们似乎工作得很好，它们打开，我可以选择一个新日期，它会正确显示。

问题是虽然我可以在输入字段中看到正确的值，但我无法通过任何我知道的方式访问这些值。

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

显示原始值，即我加载页面时的值。我试着用浏览器的检查器，确保没有重复的ID，并且没有用Datepicker替换原来的输入，但貌似一切正常。

使用 Datepicker 的 getDate 方法给出类似的结果，无论我更改多少次，它总是 return 原始值。

如何通过jQuery获取当前设置值？

Answer 1

问题是我按以下方式初始化了弹出框：

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

意思是popover的内容是从现有的中加载的，但没有显示<div>。因此 datepicker 以一种奇怪的方式附加 - 它显示正确但所选值被写入副本，不可见 div 的 input.

自 display:none; 以来，检查器中看不到重复的 input。

为 popoverCnt 将 <div> 标签更改为 <template> 立即解决了问题。

Bootstrap 日期选择器未正确更新

Bootstrap datepicker does not update properly

javascript

jquery

twitter-bootstrap

bootstrap-datepicker

bootstrap-popover