Javascript Datepicker仅在jQuery UI对话框中显示一次

我使用jQueryUI创建了一个对话框，其中有一个日期选择器。当我第一次创建对话框时，当输入有日期选择器，有焦点时，日期选择器显示正确，但是如果我关闭对话框并再次创建它，尽管有日期选择器的输入有焦点，但日期选择器不会显示

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

是我正在使用的代码，使用JSFIDLE

<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);
    });    
});

更新 请检查以下代码是否适合您。您需要将其附加到正文中

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

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

如果有帮助，请检查以下代码：

jsfiddle：

html:

jquery：

---

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

如果您不想使用计数器，也不想在脚本中添加额外的代码

<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();
    });    
});

---

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

我不确定你的问题是什么。小提琴很好用。当你关闭对话框，然后单击按钮时，就不再有日期选择器了。@Askanison4问题是，当我关闭对话框，再次按下按钮，然后从输入中单击，然后再次单击输入时，日期选择器不会显示。@tilda，我如何才能再次创建它？我认为调用$myDate.datepickeroptions；如果它不存在，请创建它。感谢您的回复。我知道这个解决方案，但是html文件实际上，jsp文件是为不同的页面共享的，我不想把表单放在上面，这就是为什么我使用字符串创建表单。这可以用它吗？你想动态创建表单吗？是的，嗯。。。我不想在jsp中创建表单，因为虽然它没有显示，但它就在那里，我不喜欢这样。如果没有其他解决方案，我会这么做，但如果有其他方法。。。ThanksJShiddle演示不起作用？？如果你不写计数器。每次单击都会添加多个表单。这就是为什么它对他不起作用的原因，因为id不能是多重的。id是唯一的。因此，只有在第一次点击时它才工作我看不到日历弹出？？我不知道你到底面临什么问题……但它对我起作用……我可以打开和关闭模式对话框，每次我这样做时日历都会弹出……你使用的是哪种浏览器……我在Firefox中测试过……如果你使用不同的浏览器，请向我报告错误浏览器..我更新了我的代码，使其在点击按钮时失去焦点..谢谢。。

$(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();
    });
});

<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();
    });    
});