关于javascript：jquery确认对话框中的jQuery UI datepicker

jQuery UI datepicker within jquery-confirm dialog

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

我已经设置了表单(单个字段)，但我希望此输入为日期选择器，而且我不知道应该在何处放置javascript来实现此目的，因为直到对话框出现时，此表单才存在生成。

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

我的对话框javascript：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

$('.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的内容：

1
2
3
4
5
6
7
8
9

<p>
The only editable field currently is 'deal end date'. (This may change soon)
</p>

<label>New End Date</label>
<input autofocus type="text" id="new_end_date" name="new_end_date" class="form-control">

<p class="text-danger" style="display:none">Please enter an end date, or click 'close'.
</p>

谢谢！！！

相关讨论

我有同样的问题，这就是我如何解决。

您需要将事件onOpen和onClose添加到确认对话框以添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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

});
}
}
});