Jquery datepicker在添加documnet ready时不工作

rwqw0loc 于 12个月前发布在 jQuery

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

我有一个像这样的自定义日期选择器

<input id='mydatepicker' data-mddatetimepicker='true' data-placement='left' data-trigger='focus' data-enabletimepicker='false' />

字符串
当我在html代码中使用它时，效果很好。例如：

<div class="col-md-4" id="mydiv">
    <input id='mydatepicker' data-mddatetimepicker='true' data-placement='left' data-trigger='focus' data-enabletimepicker='false' />
</div>

型
但是我想在document.ready中使用replaceWith添加这个日期选择器。

<div class="col-md-4" id="mydiv">
    <div id="div2"></div>
</div>

<script>
    $(document).ready(function () {
        $("#div2").replaceWith("<input id='mydatepicker' data-mddatetimepicker='true' data-placement='left' data-trigger='focus' data-enabletimepicker='false' />");
    });
</script>

型
但是当页面加载只是显示一个简单的输入没有日期选择器。我如何才能正确地做这个替换？
我用这个library for datepicker

jquery

来源：https://stackoverflow.com/questions/77691926/jquery-datepicker-not-working-when-add-in-documnet-ready

2条答案

按热度按时间

0yg35tkg1#

一旦你把#div2替换成你的输入html，你需要用下面的代码初始化你的datepicker，就像文档[1]中建议的那样。

const dtp1Instance = new mds.MdsPersianDateTimePicker(document.getElementById('dtp1'), {
  targetTextSelector: '[data-name="dtp1-text"]',
  targetDateSelector: '[data-name="dtp1-date"]',
});

字符串
请参见以下示例。

$(document).ready(function() {
  $("#div2").replaceWith("<input id='mydatepicker' data-mddatetimepicker='true' data-placement='left' data-trigger='focus' data-enabletimepicker='false' data-name='dtp1-text' />");
  
  const dtp1Instance = new mds.MdsPersianDateTimePicker(document.getElementById('mydatepicker'), {
  targetTextSelector: '[data-name="dtp1-text"]',
  targetDateSelector: '[data-name="dtp1-date"]',
});
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://mds92.github.io/MD.BootstrapPersianDateTimePicker/src/mds.bs.datetimepicker.style.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://mds92.github.io/MD.BootstrapPersianDateTimePicker/src/mds.bs.datetimepicker.js"></script>


<div class="col-md-4" id="mydiv">
  <div id="div2"></div>
</div>

的数据

赞(0）回复(0）举报 12个月前

rslzwgfq2#

尝试在替换内容后初始化日期选择器。

$(document).ready(function () {
        $("#div2").replaceWith(parameters);  
        $("#mydatepicker").datetimepicker(parameters);
    });

字符串

赞(0）回复(0）举报 12个月前

我来回答

Jquery datepicker在添加documnet ready时不工作

2条答案

相关问题

热门标签

最新问答