JQuery UI Datepicker在克隆操作的冲突问题

页面上使用jquery的克隆操作克隆出来N个input，input的形式为：

<input class=dtp name="startdate" value="" />

这时候查看源码，会给它一个默认的ID，当克隆操作后，datepicker控件会给新的input另外的ID，形如：

<input name="startdate" class="dtp hasDatepicker" id="dp1346815027717" />

这时候注意到不仅仅是多了个id，而且在class里面还多了个hasDatepicker，多出来的class是为了避免在多个input时，点击一个Input会弹出很多控件的问题。

这个问题的参考：http://blog.csdn.net/spring21st/article/details/5629124

作者的解决思路是使用removeClass的方法来去掉本来多出来的hasDaepicker，但是这样做，新的问题又会出现：

打开页面时，页面上只有一个input，当选择数量为2时，有两个input，当选择数量为3时，会有3个input，并且它们的class都是dtp.

曾经有人说过，如果把原始的input的class设置为dtp，那么克隆出来的设置为dtp2即可。问题是如果在两个的基础上再增加一个的话，这种办法就不可取了。如果选择空间数量的控件是个select，默认1，如果直接选择3，那么这三个日历控件都可以用，如果先选择3，后来发现少一个，又选择了4，那么对于第四个日历控件就不能弹出。

也就是说，页面初始化时，给dtp本身一个方法，就是默认的加载日历控件的方法：

  $(function(){  // Datepicker  $('.dtp').datepicker({  numberOfMonths:1,  showButtonPanel:false,  dateFormat: 'yy-mm-dd',  minDate: new Date()  });  });

页面上的Input class为dtp。

需要克隆的那部分把它的input的class设置为dtp2，于是就有了如下的代码：

  $('.dtp2').datepicker({  numberOfMonths:1,  showButtonPanel:false,  dateFormat: 'yy-mm-dd',  minDate: new Date()  });  

上面说过了，这个方法在仅仅出现一次的情况下可以用，但是对于多次选择数量时就不起左右了，新克隆出来的input不会弹出日历控件。如果使用上述的removeClass方法，则会弹出控件，但是点击日期之后，还会在第一个Input中改变日期，而不是当前点击的那个input中出现日期。

就是把dtp2的那行代码改为：

  $('.dtp2').attr("id", ++$.datepicker.uuid).removeClass("hasDatepicker").datepicker({  numberOfMonths:1,  showButtonPanel:false,  dateFormat: 'yy-mm-dd',  minDate: new Date()  });

这个问题出现的原因很简单，是因为控件没有和当前发生动作的input绑定。

解决的办法（得益于思路http://yiqi1943.blog.163.com/blog/static/336203722011111342240290/）：

$('.dtp2').each(function() {        $(this).attr("id", ++$.datepicker.uuid).removeClass("hasDatepicker").datepicker({numberOfMonths:1,showButtonPanel:false,changeYear: true,changeMonth: true,dateFormat: 'yy-mm-dd',defaultDate: '1970-01-01'        });});

这段代码写在克隆操作之后，完美解决。