在動態創建的按鈕上顯示日期選擇器

我想在用戶點擊動態創建的按鈕時顯示日期選擇器。我不想在那裏顯示文本框，所以我使用隱藏的輸入。在動態創建的按鈕上顯示日期選擇器

的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

在動態創建的按鈕上顯示日期選擇器

回答

相關問題