显示的多个日历或选择的值未正确显示

Question

好的，我正在使用jQuery Mobile Framework 并添加Experimental Date Picker，但我遇到了两个结果。按照页面上的说明，这就是我目前所拥有的。

代码工作 #1：

$(document).ready(function() {        
    $('.hasDatepicker').hide();

    $('#date-of-birth').each(function() {     
        $(this).focus(function() {
            $(this).next().show('fast');
        });

        $(this).blur(function() {               
           $(this).next().hide('fast');
        });
    });
});

现在这显示了一个日历（如我所愿），但在选择日期时，日期保持不变（今天的日期）而不是选择的日期。

代码工作 #2：

$(function() {
    $('.hasDatepicker').hide();

    $('#date-of-birth').focus(function() {
        $('.hasDatepicker').show('fast');
    });

    $('#date-of-birth').blur(function() {
        $('.hasDatepicker').hide('fast');
    });
});

现在这显示了多个日历（确切地说是 5 个）堆叠在一起，并且如果我选择它按预期工作的日期。但我只想显示一个日历。

我想将这两种代码工作结合起来以获得所需的结果，但似乎没有任何效果。

这里是 HTML

<div data-role="fieldcontain">
    <label for="date-of-birth">Date of Birth</label>
    <input type="date" name="date-of-birth" id="date-of-birth" />                
</div>

type="date" 是您调用日期选择器的方式

有什么建议吗？

其他可能会有所启发的堆栈链接

• Link 1
• Link 2

更新：

这可能是问题，但仍未找到解决方案。

我使用 jQueryMobile 的 Multi-page layout 选项，对于每个页面，它都会创建一个额外的日期选择器，但它会显示它们彼此堆叠并且功能无法正常工作

Answer 1

我让它工作了。我问了这个问题：jQuery Mobile -> Override jQuery UI Datepicker -> Layout broken

这是实验性的，但它有效。你不应该使用这个

$('.hasDatepicker').show('fast');

您应该为一个站点上的每个日期选择器添加一个唯一的id，然后写：

$('#uniqueId').show('fast');

我在日期选择器的 JavaScript 文件中添加 ID。