calendar inside jquery popup

Question

I tried a calendar inside popup. I have a text box inside popup. Onclicking the popup, calendar should come. Below is the code i Tried. I am not getting calendar onclicking the textbox.

/*cal.jsp*/
     <form id="cal"> 
        <table>
         <tr>
        <td>
        <div id="dialog"  title="Details" >
        <input id="Picker" name="Picker" style="visibility:hidden;" type="text">
        </div>
            </td>
         </tr>
        </table>
        </form>
   /*cal.js*/
    function dialogFunction()
    {
        this.cal['Picker'].style.visibility='visible';
              $("#dialog").dialog({
                  buttons:{
                      Dispatch:function(){

                      }
                  }
              });
    }
/*outside ondocument ready as I don't need it onload of page*/
$("#Picker").click(function(){

    $(function() {
        var pickerOpts = {
                        dateFormat:"dd-mm-yy"
                    };  
        $( "#Picker" ).datepicker(pickerOpts);
      });
});

When I click textbox, I don't see calendar popup at all. Any help??

Answer 1

you can use the dialog load event and in that you can initialize the datepicker

like

 $("#dialog").dialog({
              buttons:{
                  Dispatch:function(){

                  },
                    open: SetBindings()
              }
              });
        function setBindings()
        {
            $("#DialogPopupdiv").find("Picker").click(function(){

            $(function() {
                var pickerOpts = {
                                dateFormat:"dd-mm-yy"
                            };  
                $( "#Picker" ).datepicker(pickerOpts);
              });
            });
        }