jQuery UI中的日期選擇器 - 確認對話框

Question

我正在使用下面的鏈接中的jquery-confirm腳本。它具有在對話框中包含表單域的功能。您可以通過點擊下面鏈接中的「按提示操作」藍色按鈕來查看此信息。

我已經設置了窗體（單個字段），但我希望此輸入是日期選擇器，並且我不知道應該將JavaScript放在哪裏，因爲此窗體沒有直到生成對話框。

https://craftpip.github.io/jquery-confirm/

我對話的javascript：

  $('.deal_edit').on('click', function() { 
      var id = $(this).attr('data-id'); 
      $.confirm({ 
       title: 'Change end Date', 
       content: 'url:form.txt', 
       confirm: function() { 
        var input = this.$b.find('input#new_end_date').val(); 
        var errorText = this.$b.find('.text-danger'); 
        if (input.val() == '') { 
         errorText.show(); 
         return false; 
        } else { 
         var data = {action: 'edit_deal', id: id, new_date: new_date}; 
         $.post('ajax.php', data, function(response) { 

          $.alert({ 
           title: "Updated", 
           content: "Ok, record has been updated - this page will reload.", 
           confirm: function() { 
            location.reload(); 
           } 
          }); 

         }); 
        } 
       } 
      }); 
      return false; 
     });  

form.txt的內容：

<p>The only editable field currently is 'deal end date'. (This may change soon)</p> 
<div class="form-group"> 
    <label>New End Date</label> 
    <input autofocus type="text" id="new_end_date" name="new_end_date" class="form-control"> 
</div> 
    <p class="text-danger" style="display:none">Please enter an end date, or click 'close'.</p> 

謝謝！

Answer 1

我有同樣的問題，這是我如何解決它。

您需要添加事件的OnOpen和OnClose中的確認對話框添加

 $.confirm({ 
      onOpen: function(){ 
       $(".datepicker").datepicker(); 
      }, 
      onClose: function(){ 
       $(".datepicker").datepicker("destroy"); 
      }, 
      title: 'Change end Date', 
      content: 'url:form.txt', 
      confirm: function() { 
       var input = this.$b.find('input#new_end_date').val(); 
       var errorText = this.$b.find('.text-danger'); 
       if (input.val() == '') { 
        errorText.show(); 
        return false; 
       } else { 
        var data = {action: 'edit_deal', id: id, new_date: new_date}; 
        $.post('ajax.php', data, function(response) { 

         $.alert({ 
          title: "Updated", 
          content: "Ok, record has been updated - this page will reload.", 
          confirm: function() { 
           location.reload(); 
          } 
         }); 

        }); 
       } 
      } 
     }); 

Answer 2

您可以在onContentReady事件中添加代碼，就像一個插件創建對話框窗口後調用函數。您可以將此代碼添加到您的示例中

onContentReady: function() { 
    $("#new_end_date").datetimepicker(); 
}