動態JQuery日期選擇器代碼

我需要創建動態過濾器，動態添加/刪除行。動態JQuery日期選擇器代碼

它包含一個下拉框。根據所選的下拉框值，我創建一個可能有文本字段或下拉列表的動態<TD>。

如果是文本字段，那麼我必須爲該文本字段添加日期選擇器。

我已經這樣做了，除了動態生成文本字段的日期選擇器。
如果您要創建100行，則所有行的文本字段的名稱應該相同。

如何爲動態生成的文本字段添加datepicker？

來源

2010-03-02 Shanmugam

使用JQuery Live訪問動態創建的DOM。

http://api.jquery.com/live/

的可以附着在選擇器。

http://jqueryui.com/demos/datepicker/

來源

2010-03-02 17:21:27

嗨，謝謝你的寶貴help.but在這個鏈接沒有任何動態內容創建.give該示例中的一些例子。 – Shanmugam 2010-03-02 17:35:46

Tirst添加類屬性爲「約會」到你的輸入或DIV。

動態添加文本輸入後必須再次調用$('.date').datePicker()才能將datePicker綁定到新的輸入或div。

來源

2010-03-02 17:25:52

嗨盧卡，感謝您的答覆。我的代碼是， $（'td：eq（2）'，newRow）.html（''）; $（'。date'）。datePicker（）; \t 但它並沒有顯示任何東西plz幫助我，我需要做的。給我你的寶貴幫助PLZ。 – Shanmugam 2010-03-02 17:34:03

你使用jQuery UI嗎，是嗎？如果是這樣第一個正確的datePicker datepicker ...我寫了datePicker之前，因爲我正在寫在飛...旁邊，你的代碼看起來不錯...也確保它被調用（添加一個警報（）？） – 2010-03-02 21:01:51

我有同樣的問題。您需要將DatePicker重新綁定到動態添加的行。日期選取器將hadDatePicker類關聯到動態行。

所以你需要刪除和重新綁定。

事情是這樣的 -

jQuery('.date-pick').removeClass('hasDatepicker').datepicker({ 
    dateFormat: 'mm-dd-yy' 
    });

問候，蒂娜阿格拉瓦爾

來源

2011-07-22 10:10:53

這工作完全適合我。謝謝蒂娜。 – 2011-11-21 01:21:08

'removeClass（'hasDatepicker'）'是關鍵！ :)謝謝 – Ajax 2012-06-07 11:55:01

這是唯一的解決方案，爲我工作。謝謝！ – 2012-11-15 23:00:15

我其實使用由@Tina阿格拉瓦爾但由於現在所提供的解決方案，當我從日曆中選擇一個日期，我點擊再次重新選擇。如果我在下個月點擊，它會轉到1900-01-01。

那麼這是如此奇怪......

經過兩個小時的試驗和錯誤和研究。

我根本：

$('.date-pick').live('click', function(){ 
$('.date-pick').datepicker(); 
});

那麼它的工作原理。

來源

2012-01-04 17:57:51 workdreamer

不適用於我 - 我沒有看到日期選擇器，直到我點擊後該字段，所以我必須點擊兩次以獲取日期選擇器彈出。 – 2013-02-08 17:59:42

您可以嘗試先在document.ready $（'。date-pick'）。datepicker（）; – workdreamer 2013-02-10 14:55:02

你意識到這個問題是關於動態添加到DOM的字段，經過AJAX調用之後，對吧？ document.ready將如何幫助它？ – 2013-02-11 01:19:40

我有一個類似的問題，當動態地向我的表添加新行時，新行中的Date Picker字段（任何動態添加到DOM的行）都在更新我的最初行Date Picker字段。

如上所示，刪除hasDatepicker類不足以解決我的問題，可能正如我使用.clone（）創建動態添加的行一樣。

的解決方案時，克隆行是刪除克隆輸入字段，重新創建它們，將它們添加到我的新克隆的錶行，然後重新啓動的日期選擇器

例如：

//Remove exisiting cloned input fields 
new_row.find("td.date input").remove(); 

//Create new input fields and append to table td 
var date_tds = new_row.find("td.date"); 
$('<input />', {"name":"gStartDates["+n_array_pos+"]","type":"text"}).appendTo(date_tds[0]); 
$('<input />', {"name":"gEndDates["+n_array_pos+"]","type":"text"}).appendTo(date_tds[1]); 

//Re-initiate datepicker on the input fields      
new_row.find("td.date input").datepicker({ 
    dateFormat:"dd-mm-yy", 
    minDate:StartDate, 
    maxDate:EndDate 
});

來源

2012-07-19 11:25:35

一個應該使用「.on」而不是直播 - 請參閱 http://api.jquery.com/on/

來源

2013-02-13 17:31:05 fbtb

我有同樣的問題，並以不同的方式解決它。雖然我不太清楚爲什麼它能夠工作，因爲我對jquery非常陌生。我寫了下面的代碼，它迭代了具有類「class_date」的整套控件，並將datepicker控件重新綁定到它。

$(".class_date").removeClass('hasDatepicker').datepicker();

來源

2013-04-20 05:59:56

動態JQuery日期選擇器代碼

回答

相關問題