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

Question

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

代码工作#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" 是您调用日期选择器的方式

有任何提示吗？

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

• 链接 1
• 链接 2

更新：

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

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

Answer 1

我成功了。我问了这个问题： jQuery Mobile ->覆盖 jQuery UI 日期选择器 ->布局损坏

这是实验性的，但它可以工作。您不应该使用它

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

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

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

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