引导日期选择器和本地存储

Question

我希望用户从引导日期选择器组件中选择一个日期并将所选值存储在本地存储中。当用户完成选择后，他们可以选择按钮，然后 ajax 调用将使用本地存储。

此时我无法让 datepicker 组件在本地存储中设置值。日期选择器组件在用户选择 is 并且用户的选择成为输入字段的值时呈现。

这里是标记：

<form>
    <div class="form-group">
        <label for="edge-name" class"control-label">Start:</label>
        <input type="text" class="form-control" id="filterStart">
    </div>
</form>

还有 javascript

$(document).ready(function(){
    $('#filterStart').datepicker();
    $('#filterStart').on('changeDate' function(){
        var newValue = $('#filterStart').datepicker('getFormattedDate')
        localStorage.setItem('filterStart',newValue);
        });

我在整个 javascript 中的不同位置插入了 console.log，但代码从不写入控制台，因此我知道它没有写入本地存储。我知道本地存储正在工作，因为我在代码的其他部分使用它。

此外，我们将不胜感激有关如何更好地做到这一点的任何建议。

Answer 1

如果你正在使用这个bootstrap-datepicker，你可以看看下面的jsfiddle：

$('#filterStart').datepicker();
$('#filterStart').on('changeDate', function (e) {
    var newValue = $('#filterStart').datepicker('getFormattedDate')
    localStorage.setItem('filterStart', newValue);
});
$('#btn').on('click', function(e) {
    $('#logMsg').val('Value saved in local storage is: ' + 
    localStorage.getItem('filterStart'));
})

Answer 2

我找不到方法“getFormattedDate”是否存在，但有一个标准的 getDate 方法。顺便说一句，您在 newValue 的定义行中漏掉了一个分号；

Answer 3

我认为您可能会在 changeDate 事件中实例化一个新的日期选择器。您可以尝试从.data 获取格式化日期：

var newValue = $('#filterStart').data('datepicker').getFormattedDate('yyyy-mm-dd');