應用場景:
頁面上有一些現有的輸入框,需要調用日期插件,同時還要clone一份,動態添加到頁面中,動態生成的輸入框在調用datepicker的時候,click事件有效,但是選擇的時間無法回顯到對應的輸入框中。
問題分析:
ui.datepicker.js 添加斷點,發現datepicker.js 對 input 控件會自動生成一個id
/* Attach the date picker to a <a href="http://lib.csdn.net/base/jquery" class='replace_word' title="jQuery知識庫" target='_blank' style='color:#df3434; font-weight:bold;'>jQuery</a> selection. @param target element - the target input field or division or span @param settings object - the new settings to use for this date picker instance (anonymous) */ _attachDatepicker: function(target, settings) { // check for settings on the control itself - in namespace 'date:' var inlineSettings = null; for (var attrName in this._defaults) { var attrValue = target.getAttribute('date:' + attrName); if (attrValue) { inlineSettings = inlineSettings || {}; try { inlineSettings[attrName] = eval(attrValue); } catch (err) { inlineSettings[attrName] = attrValue; } } } var nodeName = target.nodeName.toLowerCase(); var inline = (nodeName == 'div' || nodeName == 'span'); if (!target.id) target.id = 'dp' + (++this.uuid);
同時,在將 datepicker 附加到 input 控件的時候,如果發現input 控件有this.markerClassName 樣式 ( markerClassName: 'hasDatepicker', 109行),則跳出function,不再進行附加。
/* Attach the date picker to an input field. */ _connectDatepicker: function(target, inst) { var input = $(target); inst.trigger = $([]); if (input.hasClass(this.markerClassName)) return; .... }
解決:
首先,將input 控件的id 自增1;然后,去掉 input 控件的'hasDatepicker' 樣式:
$("input.clonedp").attr("id", ++$.datepicker.uuid).removeClass("hasDatepicker").datepicker({ showOn : "both" //,appendText : "(yyyy-mm-dd)" ,clearText : "Erase" ,mandatory : true //,closeText : "X" ,closeAtTop : false ,prevText : "Earlier" ,nextText : "Later" ,currentStatus: '<a href="http://lib.csdn.net/base/go" class='replace_word' title="Go知識庫" target='_blank' style='color:#df3434; font-weight:bold;'>Go</a> to this month' //,monthNames:['一月','二月','三月','四月','五月','六月' // ,'七月','八月','九月','十月','十一月','十二月'] ,monthNames:['1','2','3','4','5','6','7','8','9','10','11','12'] ,yearRange : "2008:2010" ,dateFormat: 'yy-mm-dd' });