Question

我需要显示动态日期选择器，我的代码在

下面

$(function() {
$('.datepicker').datepicker({
    showAnim: "clip",
    gotoCurrent: true,
    dateFormat: "dd-mm-yy"
});
$('#mdcn_name').click(function(){

            $('<tr class="field" id="row"><td><input type="text" id="expire_date" name="expire_date" class="datepicker" placeholder="dd-mm-yyyy"/></td></tr>').fadeIn('slow').appendTo('#dataTabl');


});


});

<table id="dataTabl">
        <tr>
            <th>Exp Date</th>

            </tr>
</table>

当我点击添加行时，我需要动态创建/显示datepicker。请帮帮我

Answer 1

这是因为你的日期选择器不会为动态附加的div进行初始化。

创建一个datepicker函数

function displayDatepicker(){
 $('.datepicker').datepicker({
   showAnim: "clip",
   gotoCurrent: true,
   dateFormat: "dd-mm-yy"
 });
}

$(function() {
     displayDatepicker()  //initialize date picker whn doucment is ready

     $('#mdcn_name').click(function(){

        $('<tr class="field" id="row"><td><input type="text" id="expire_date" name="expire_date" class="datepicker" placeholder="dd-mm-yyyy"/></td></tr>').fadeIn('slow').appendTo('#dataTabl');

         displayDatepicker() //call it after the element is appended...now this finds the appended div with a class datepicker and initailze the datepicker...

      });
});

Answer 2

所提供的所有解决方案都会重新初始化所有日期选择器，但您实际上只想定位新的。 Follwing只会定位新的datepicker字段

/* store datepicker options in object*/
var datePickerOpts = {
    showAnim: "clip",
    gotoCurrent: true,
    dateFormat: "dd-mm-yy"
}
$(function() {
    $('.datepicker').datepicker(datePickerOpts);
    $('#mdcn_name').click(function() {

        var $row = $('<tr class="field" id="row"><td><input type="text" id="expire_date" name="expire_date" class="datepicker" placeholder="dd-mm-yyyy"/></td></tr>')
        $('#dataTabl').append($row);
        /* look for datepicker in new row and initialize*/
        $row.fadeIn('slow').find('.datepicker').datepicker(datePickerOpts);

    });
});

Answer 3

是否可能因为datepicker初始化只发生一次，并且很可能在click事件被触发之前并且DOM中存在输入class =“datepicker”？

在追加后立即将您的匿名函数移动到.click（）函数中。

$('#mdcn_name').click(function(){
    $('<tr class="field" id="row"><td><input type="text" id="expire_date" name="expire_date" class="datepicker" placeholder="dd-mm-yyyy"/></td></tr>').fadeIn('slow').appendTo('#dataTabl');
    $(".datapicker").datepicker({
    ....
    ...
    ...
    etc....

}）;

Answer 4

尝试将您的功能放在

中

$(document).ready(function(){})

这将处理您的dom ready事件

请参阅此链接以获取详细说明

http://davidwalsh.name/javascript-domready

希望这有帮助

我如何动态使用jQuery datepicker

4 个答案: