JQuery UI Datepicker在克隆操作的冲突问题
2012-09-05 11:40
651 查看
页面上使用jquery的克隆操作克隆出来N个input,input的形式为:
这时候查看源码,会给它一个默认的ID,当克隆操作后,datepicker控件会给新的input另外的ID,形如:
这时候注意到不仅仅是多了个id,而且在class里面还多了个hasDatepicker,多出来的class是为了避免在多个input时,点击一个Input会弹出很多控件的问题。
这个问题的参考:/article/7888096.html
作者的解决思路是使用removeClass的方法来去掉本来多出来的hasDaepicker,但是这样做,新的问题又会出现:
打开页面时,页面上只有一个input,当选择数量为2时,有两个input,当选择数量为3时,会有3个input,并且它们的class都是dtp.
曾经有人说过,如果把原始的input的class设置为dtp,那么克隆出来的设置为dtp2即可。问题是如果在两个的基础上再增加一个的话,这种办法就不可取了。如果选择空间数量的控件是个select,默认1,如果直接选择3,那么这三个日历控件都可以用,如果先选择3,后来发现少一个,又选择了4,那么对于第四个日历控件就不能弹出。
也就是说,页面初始化时,给dtp本身一个方法,就是默认的加载日历控件的方法:
需要克隆的那部分把它的input的class设置为dtp2,于是就有了如下的代码:
上面说过了,这个方法在仅仅出现一次的情况下可以用,但是对于多次选择数量时就不起左右了,新克隆出来的input不会弹出日历控件。如果使用上述的removeClass方法,则会弹出控件,但是点击日期之后,还会在第一个Input中改变日期,而不是当前点击的那个input中出现日期。
就是把dtp2的那行代码改为:
这个问题出现的原因很简单,是因为控件没有和当前发生动作的input绑定。
解决的办法(得益于思路http://yiqi1943.blog.163.com/blog/static/336203722011111342240290/):
这段代码写在克隆操作之后,完美解决。
<input class=dtp name="startdate" value="" />
这时候查看源码,会给它一个默认的ID,当克隆操作后,datepicker控件会给新的input另外的ID,形如:
<input name="startdate" class="dtp hasDatepicker" id="dp1346815027717" />
这时候注意到不仅仅是多了个id,而且在class里面还多了个hasDatepicker,多出来的class是为了避免在多个input时,点击一个Input会弹出很多控件的问题。
这个问题的参考:/article/7888096.html
作者的解决思路是使用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' }); });
这段代码写在克隆操作之后,完美解决。
相关文章推荐
- jquery UI Datepicker时间控件冲突问题解决
- JQuery UI datepicker在选择startDate与endDate时手动清空数据后,时间选择依然有限制问题!
- datepicker 失效,jquery-ui.js 冲突,日历框跑出来了
- jquery-ui datepicker插件在页面第二次点击时无效的问题
- jQuery-ui 的datepicker日历插件使用clone()出来的input无法选择问题
- jquery UI Datepicker时间控件的使用及问题解决
- jquery UI Datepicker时间控件的使用及问题解决
- Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
- 设置jQueryUI DatePicker默认语言为中文
- jQuery UI Datepicker中文显示
- Bootbox+JQuery UI Datepicker 时间输入框点击无响应
- jQuery UI datepicker
- JQuery UI Datepicker中文显示的方法
- jquery ui datepicker
- 获取日期的jquery.ui.datepicker
- jQuery UI Datepicker中文显示
- jQuery 入门教程(28): jQuery UI Datepicker 示例(一)
- jquery UI datepicker汉化
- jquery.datepicker、jquery.validate、jquery.uploadify冲突解决
- jquery ui datepicker只显示年和月