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