使用clone()后，解决ui.datepicker 显示问题

来源：互联网发布：计算机二级java题库编辑：程序博客网时间：2024/06/06 01:38

在将InfoPath web化处理中，遇到重复节，可以使用clone() 的方法将重复节进行复制，但是，日期选择器无法显示。

通过调试，找到 input 控件，click事件是生效的，证明问题是datepicker的原因。

ui.datepicker.js debug in vs2008, 添加断点，发现

datepicker.js 对 input 控件会自动生成一个id，

145行：

/* Attach the date picker to a jQuery 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);

target.id = 'dp' + (++this.uuid);

$.datepicker.uuid = new Date().getTime();

同时，在将 datepicker 附加到 input 控件的时候，

166行：

/* Attach the date picker to an input field. */_connectDatepicker: function(target, inst) {var input = $(target);inst.trigger = $([]);if (input.hasClass(this.markerClassName))return;....}

如果发现input 控件有this.markerClassName 样式 ( markerClassName: 'hasDatepicker', 109行)，则跳出function，不再进行附加。

这样做是正确的，防止点击input 控件后，附加多个datepicker。

但是，当clone() 后，导致无法附加datepicker。

解决方案：

首先，将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: 'Go to this month'//,monthNames:['一月','二月','三月','四月','五月','六月'//,'七月','八月','九月','十月','十一月','十二月'],monthNames:['1','2','3','4','5','6','7','8','9','10','11','12'],yearRange : "2008:2010",dateFormat: 'yy-mm-dd'});