jQuery确认对话框中的jQuery UI datepicker [英] jQuery UI datepicker within jquery-confirm dialog

问题描述

我正在使用下面链接中的jquery-confirm脚本。它具有在对话框中包含表单字段的功能。您可以通过点击以下链接上的像提示一样行动蓝色按钮来查看此内容。

I'm using the jquery-confirm script from the link below. It has the capability to include a form field within a dialog box. You can see this by clicking on the "Act Like a Prompt" blue button at the link below.

我已经设置了表单（单个字段），但是我希望此输入为日期选择器，并且我不知道该将输入放在哪里javascript可以做到这一点，因为在生成对话框之前这种形式不存在。

I've got the form (a single field) set up, but I want this input to be a datepicker, and I don't know where I should put the javascript to make this happen since this form doesn't exist until the dialog is generated.

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

我的对话框javascript：

My dialog 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的内容：

Contents of 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>

谢谢!!!

推荐答案

我遇到了同样的问题，这就是我如何解决的问题。

I had the same issue, this is how I fix it.

您需要在确认对话框中添加onOpen和onClose事件，以添加

You need to add events onOpen and onClose to the confirm dialog to add

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

                    });
                }
            }
        });

这篇关于jQuery确认对话框中的jQuery UI datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！