Datepicker只在对话框jquery ui中显示一次

Question

首先抱歉我的英语。 我有问题，希望你能帮助我。 问题是我使用jquery-ui创建了一个对话框，在其中我有一个datepicker。我第一次创建对话框，当输入具有datepicker，具有焦点时，datepicker正确显示，但是如果我关闭对话框并再次创建它，虽然输入具有日期选择器，具有焦点，但是datepicker不会t show。

我发现了其他类似的问题，但我无法解决这个问题。

This是我使用的代码（jsfiddle）

<input type="button" value="Click Me" id="btnDialog" />

$(function() {
    $('#btnDialog').on('click',function() {        
        var formContent = '<form> <fieldset>' +
          '<label for="name">Date (dd.mm.yyyy)</label>' +
          '<input type="text" id="myDate" />' +
          '</fieldset> </form>';
        $('<div id="myDialog" title="Text Dialog">' + formContent + '</div>').dialog();
        var options = eval('({dateFormat: \'dd.mm.yy\', changeYear: true,numberOfMonths: 1, firstDay: 1})');
        $("#myDate").datepicker(options);
    });    
});

提前多多感谢。

Answer 1

<强>已更新 请检查以下代码是否适合您。你需要将它附加到身体上。

注意： 如果您不想保留以前的内容，请执行以下操作：

$("#myDate").datepicker().val("").focus();

检查以下代码是否有帮助：

<强>的jsfiddle：

<强> http://jsfiddle.net/VM4Hq/12/

<强> HTML：

<input type="button" value="Click Me" id="btnDialog" />

<强> jquery的：

$(function() {
    var i = 0;
    $('#btnDialog').on('click', function() {
        i++;
        if (i === 1) {
            var formContent = '<form> <fieldset>' +
                    '<label for="name">Date (dd.mm.yyyy)</label>' +
                    '<input type="text" id="myDate" />' +
                    '</fieldset> </form>';
            $('<div id="myDialog" title="Text Dialog">' + formContent + '</div>').appendTo("body");
        }
        $("#myDialog").dialog();
        $("#myDate").datepicker().focus();
    });
});

Answer 2

这是我的解决方案我在创建动态表单时将id属性更改为class属性，就像之前一样。但是仍然有很多方法可以使这些代码起作用，我更喜欢这个。

如果您不想使用计数器并在脚本中添加一些额外的代码，那么

<input type="button" value="Click Me" id="btnDialog" />

$(function() {
    $('#btnDialog').on('click',function() {        
        var formContent = '<form> <fieldset>' +
          '<label for="name">Date (dd.mm.yyyy)</label>' +
          '<input type="text" id="myid" class="myDate" />' +
          '</fieldset> </form>';
        $('<div id="myDialog" title="Text Dialog">' + formContent + '</div>').dialog();
        var options = eval('({dateFormat: \'dd.mm.yy\', changeYear: true,numberOfMonths: 1, firstDay: 1})');
        $(".myDate").datepicker(options);
        $("input").blur();
    });    
});

JSFIDDLE DEMO

此代码将为您完成此操作。希望这会有所帮助。