Datepicker only is shown once in a dialog jQuery UI

Question

I created a dialog using jquery-ui, and inside it I have a datepicker. First time I create the dialog and when the input which has datepicker, has the focus, the datepicker shows correctly, but if I close the dialog and create it again, although the input which has the datepicker, has the focus, the datepicker doesn't show.

I found other similar questions but I can't to resolve this problem.

This is the code I'm, using (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

UPDATED Please check if the below code is fine for you. you need to append it to body.

NOTE: if you don't want to retain the previous content then do as below:

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

check the below code if it helps:

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

Here's my solution I changed the id attribute to class attribute when creating the dynamic form as you did before. But still there are n number of ways this code can be made to work, I would prefer this.

If you don't want to use counters and to add some extra code in your script then here,

<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

This code will do that for you. Hope this helps.