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

好的，我正在使用jQuery 移动框架并添加实验性日期选择器但我遇到两个结果。按照页面上的说明进行操作，这就是我到目前为止所拥有的。

代码工作#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>

The type="date"是你如何称呼日期选择器

有小费吗？

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

• Link 1
• Link 2

UPDATE:

好吧，这可能是问题所在，但仍然没有找到解决方案。

我使用的是多页面布局jQueryMobile 的选项，对于每个页面，它都会创建一个附加的日期选择器，但它会显示它们彼此堆叠，并且功能无法正常工作

我成功了。我问了这个问题：jQuery Mobile -> 覆盖 jQuery UI Datepicker -> 布局损坏

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

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

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

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

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