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