日期選擇器僅在對話框 jQuery UI 中顯示一次

Question

我使用 jquery-ui 創建了一個對話框，里面有一個日期選擇器。 我第一次創建對話框時，當具有日期選擇器的輸入具有焦點時，日期選擇器顯示正確，但是如果我關閉對話框並再次創建它，盡管具有日期選擇器的輸入具有焦點，日期選擇器卻沒有顯示。

我發現了其他類似的問題，但我無法解決這個問題。

這是我使用的代碼（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" />

查詢：

$(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 屬性。 但是仍然有 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();
    });    
});

JSFIDDLE 演示

此代碼將為您完成此操作。 希望這可以幫助。