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"是你如何调用日期选择器

任何提示？

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

更新：

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

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

Answer 1

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

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

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

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

$（ '＃UNIQUEID'）显示（ '快'）;

我在datepicker的JavaScript文件中添加了ID。

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

1 个答案: