在动态创建的按钮上显示日期选择器

我想在用户点击动态创建的按钮时显示日期选择器。我不想在那里显示文本框，所以我使用隐藏的输入。在动态创建的按钮上显示日期选择器

的Javascript：

 function showDate(){ 
     var dateDiv = $('#dateDiv'); 
     for(ind=0; ind<=5; ind++){ 
      var date = $('<img src="calendar.png" class="datepicker" id="'+ind+'-date" /><input type="hidden" id="'+ind+'-date-picker" /><br />'); 
      dateDiv.append(date); 
     } 
    } 

    window.onload = function(){ 
     showDate(); 
     $('.datepicker').live('click', function(){ 
      var datepickerId =$(this).attr('id'); 
      datepickerId += '-picker'; 
      $('#'+datepickerId).datepicker(); 
     }); 
    }

但是当我使用日历图标，点击没有发生。

HTML：

<body> 
    <div id="dateDiv"></div> 
</body>

来源

2013-04-02 ARsl

.datepicker()只设置了一个日期选择器。您可以在创建div时执行此操作，而不是每次单击它。

要显示它，你可以调用.datepicker('show');

来源

2013-04-02 14:06:02

有动态创建buttons.how我可以设置日期选择器对于每个隐藏的输入字段。 @david – ARsl

你正在设置它们，但我会在创建它们的位置而不是它们要显示的位置。没什么大不了的;重要的是调用'show'来显示实际的选择器。 –

感谢它为我工作:) @david – ARsl

不知道你所使用的JQuery的版本，但如果是1.7+“.live（）”已被废弃，如果它是1.9+它已被删除。 Link

此外，我会建议使用document.ready函数进行初始化。

function showDate(){ 
    var dateDiv = $('#dateDiv'); 
    for(ind=0; ind<=5; ind++){ 
     var date = $('<img src="calendar.png" class="datepicker" id="'+ind+'-date" /><input type="hidden" id="'+ind+'-date-picker" /><br />'); 
     dateDiv.append(date); 
    } 
} 

$(document).ready(function(){ 
    showDate(); 

    $('.datepicker').on('click', function(){ 
     var $datepicker =$(this).attr('id'); 
     $datepicker += '-picker'; 
     $('#'+$datepicker).datepicker(); 
    }); 
});

Here is a fiddle of the above

来源

2013-04-02 14:11:29 Nathan

在动态创建的按钮上显示日期选择器

回答

相关问题