jquery - 如何防止 datetimepicker 被触发快乐？

Question

我创建了一个 pupup 对话框，其中包含一个用于选择日期和时间的输入元素：

<input type="text" id="timepicker1"/>

每次打开对话框或当我使用 alt+tab 切换到另一个应用程序然后再次返回浏览器时，都会弹出 datetimepicker。

任何想法如何阻止这种情况发生？

日期和时间选择器仅应在单击输入元素时激活。

谢谢！

function showCustomDialog(chartType){

    var NewDialog = $('<div id="MenuDialog">\
            <p></p>\
            <p>Select time frame to chart.</p>\
            <table>\
                <tr>\
                    <td>\
                        <p>Date: <input type="text" id="timepicker1"/>&nbsp;during&nbsp;</p>\
                    </td>\
                    <td>\
                        <select>\
                            <option value="0.25">15 Minutes</option>\
                            <option value="0.5">30 Minutes</option>\
                            <option value="1">1 Hour</option>\
                            <option value="2">2 Hours</option>\
                        </select>\
                    </td>\
                </tr>\
            </table>\
            <script>\
                    $("#timepicker1").datetimepicker({\
                        minDate: new Date(new Date() - 604800000),\
                        maxDate: new Date()\
                    });\
            </script>\
        </div>');

    NewDialog.dialog({
      height: 250,
      width: 650,
      modal: true,
      title: 'Process: '+$("#processTitle").text(),
      buttons: {
        "Create Chart": function() {
          var bValid = true;
          allFields.removeClass( "ui-state-error" );
        },
        Cancel: function() {
          $( NewDialog ).remove();
        }
      },
      close: function() {
        $( NewDialog ).remove();
      }
    }).position({
       my: "center",
       at: "center",
       of: window
    });
}

.. 以及一些用于说明目的的屏幕截图

弹出对话框

日期时间选择器

弹出对话框是从菜单创建的

Answer 1

对于任何有兴趣的人，

我通过将它添加到 datetimepicker 解决了这个问题

showOn: "按钮",

这是工作代码：

function showCustomDialog(chartType){

    var NewDialog = $('<div id="MenuDialog">\
            <p></p>\
            <p>Select time frame to chart.</p>\
            <table>\
                <tr>\
                    <td>\
                        <p>Date Time: <input type="text" id="timepicker1" value=""/>&nbsp;Time Frame:&nbsp;</p>\
                    </td>\
                    <td>\
                        <select id="datetimeselect">\
                            <option value="0.25">15 Minutes</option>\
                            <option value="0.5">30 Minutes</option>\
                            <option value="1">1 Hour</option>\
                            <option value="2">2 Hours</option>\
                        </select>\
                    </td>\
                </tr>\
            </table>\
            <p></p>\
            <script>\
                    $("#timepicker1").datetimepicker({\
                        showOn: "button",\
                        minDate: new Date(new Date() - 604800000),\
                        maxDate: new Date()\
                    });\
            </script>\
        </div>');

    NewDialog.dialog({
      height: 300,
      width: 650,
      modal: true,
      title: 'Process: SomeProcess here',//+$("#processTitle").text(),
      buttons: {
        "Create Chart": function() {
          var bValid = true;
          allFields.removeClass( "ui-state-error" );
        },
        Cancel: function() {
          $( NewDialog ).remove();
        }
      },
      close: function() {
        $( NewDialog ).remove();
      }
    }).position({
       my: "center",
       at: "center",
       of: window
    });
}