如何防止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
    });
}

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

弹出式对话框

的DateTimePicker

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

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