0

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

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

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

4

4 回答 4

2

那是因为您的日期选择器没有为动态附加的 div 初始化。

创建一个日期选择器函数

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...

      });
});
于 2012-12-27T06:27:57.543 回答
1

提供的所有解决方案都将重新初始化所有日期选择器，但您真的只想定位新的。以下将仅针对新的日期选择器字段

/* 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);

    });
});
于 2012-12-27T06:50:37.227 回答
0

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

在追加之后将您的匿名函数移动到 .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....

});

于 2012-12-27T06:31:04.130 回答
-1

尝试将您的功能放在

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

这将处理您的 dom 就绪事件

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

http://davidwalsh.name/javascript-domready

希望这可以帮助

于 2012-12-27T06:28:24.227 回答