Bootstrap AJAX 中的日期选择器已加载模式

fzwojiic 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(134)

我可以成功地初始化日期选择器每次模态加载。我不能做的是，让它工作，以完成输入字段。
我的逻辑如下：

页面加载时写入模式
填写 AJAX 请求
激活日期选取器

要加载的内容是表单。
第一次运行时，它的工作就像一个魅力。从第二次开始，它不会完成输入字段，一旦它被选中。

这不是ID问题，因为输入ID是动态创建的，日期选择器是按类加载的。

这是我的初始化代码：

$.each($html.find('.datepicker'), function(){
    var $input = $(this);
    return $input.datepicker('destroy').datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        showButtonPanel: true,
        minDate: -1,
        maxDate: "+1D +1Y",
        onClose: function(selectedDate){
            $input.addClass('has-success');
        }
    });
});

如您所见，我使用.addClass('has-success')轻松地找到了更新的输入......但是没有输入从上的模态的第二次加载中更新。
有什么想法吗？

twitter-bootstrap

来源：https://stackoverflow.com/questions/25867381/datepicker-in-ajax-loaded-modal

2条答案

按热度按时间

x8diyxa71#

您应该使用jQuery-each的以下结构：

$.each($html.find('.datepicker'), function(index, value) {
    var $input = value;
    return $input.datepicker('destroy').datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        showButtonPanel: true,
        minDate: -1,
        maxDate: "+1D +1Y",
        onClose: function(selectedDate){
            $input.addClass('has-success');
        }
    });
});

或

$html.find('.datepicker').each(function() {
    var $input = $(this);
    return $input.datepicker('destroy').datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        showButtonPanel: true,
        minDate: -1,
        maxDate: "+1D +1Y",
        onClose: function(selectedDate){
            $input.addClass('has-success');
        }
    });
});

赞(0）回复(0）举报 2022-12-07

rjjhvcjd2#

我编写了如下代码，且可以在多字段表单中正常工作：
在循环之前添加以下代码：

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"/>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$('.mydatepicker').each(function(){
   $(this).datepicker();
});
</script>

下面这行代码在循环中：

<div class="control-group form-group" style="padding: 5px;">
  <div class="controls">
    <span class="bi bi-calendar2-minus" style="color: #FF6600;"></span> Input Date
    <input name="myDate$i" type="text" class="form-control mydatepicker" id="myDate$i" required ="true" placeholder="Contoh: 2022-11-25" data-bs-toggle="tooltip" style="border-radius: 3px; padding:10px;"/>
  </div>      
</div>

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap AJAX 中的日期选择器已加载模式

2条答案

相关问题

热门标签

最新问答