引导日期选择器无法正确更新答案

【问题标题】：Bootstrap datepicker does not update properly引导日期选择器无法正确更新
【发布时间】：2017-05-21 21:13:00
【问题描述】：

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

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

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

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

使用 Datepicker 的 getDate 方法会得到类似的结果，无论我更改多少次，它都会返回原始值。

如何使用jQuery 获取当前设置的值？

【问题讨论】：

您能否添加您用于分配引导日期选择器的代码。
当我准备小提琴来回答时，我发现了问题...... :)

标签： javascript jquery twitter-bootstrap bootstrap-datepicker bootstrap-popover

【解决方案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>

意味着弹出框的内容是从现有的，但不显示<div>。因此，datepicker 以一种奇怪的方式附加 - 它显示正确，但所选值被写入重复的、不可见的 div 的 input。

由于display:none;，重复的inputs 在检查器中不可见。

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

【讨论】：