日历里面的jquery弹出窗口

Question

我在弹出窗口中尝试了一个日历。弹出窗口里面有一个文本框。点击弹出窗口，日历应该会出现。下面是我试过的代码。我没有点击文本框的日历。

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

当我点击文本框时，我根本看不到日历弹出窗口。任何帮助？

Answer 1

您可以使用对话框加载事件，并且可以初始化datepicker

像

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

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

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