我该如何使用jQuery日期选择器中动态(How can i use jQuery datepick

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

$(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>

当我点击添加行，然后我需要动态地创建/显示日期选择器。请帮我

Answer 1:

那是因为你的日期选择器是不是initailize的动态附加股利。

创建日期选择器功能

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:

所有提供的解决方案将重新初始化所有datepickers，但你真的只希望定位新的。 Follwing将只针对新的日期选择器领域

/* 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:

是不是可能是因为在日期选择器初始化只发生一次，然后单击事件之前最有可能被触发，输入类=“日期选择器”中的DOM存在？

将您的匿名函数进入。点击（）函数追加之后。

$('#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....

}）;