jQuery-克隆的日期选择器日历未显示在日期选择器字段旁边
jQuery - Cloned datepicker calendar not appearing next to datepicker field
我已经创建了一个克隆的日期选择器元素(在@Aamir Afridi的帮助下),现在我正在尝试让日历显示克隆的日期选取器字段。
我在这里创建了一个jsfiddle来说明这个问题:http://jsfiddle.net/dalepotter/xTvfx/3/
日历显示了与页面一起加载的元素的字段,但对于克隆的字段,它的位置不正确——有人知道如何解决这个问题吗?
非常感谢你能提供的任何帮助。。。
这是代码:
HTML
<h2>Action points</h2>
<table width="100%">
<tr><td width="50%" valign="top">
<h3>For the Associate</h3>
<div class="clone_Associate">
<table width="300" style="background-color:#EBEBEB; margin: 0 0 30px 0; padding: 5px;">
<tr><td class="associate_column_left">
Date set:</td><td class="associate_column_middle">
<input type="text" name="DATE_SET[]" class="datepick" value="04/12/2013">
</td></tr>
<tr><td class="associate_column_left">
Date due for completion:</td><td class="associate_column_middle">
<input type="text" name="DATE_DUE[]" class="datepick" value="">
</td></tr>
</table>
<!-- End clone_Associate -->
</div>
<div class="placer_Associate"></div>
<p><a href="#" class="clone_trigger_Associate">Add another action step for the Associate</a> </p>
</td><td width="50%" valign="top">
<h3>For us</h3>
<div class="clone_upReach">
<table width="300" style="background-color:#EBEBEB; margin: 0 0 30px 0; padding: 5px;">
<tr><td class="associate_column_left">
Date set:</td><td class="associate_column_middle">
<input type="text" name="DATE_SET[]" class="datepick" value="04/12/2013">
</td></tr>
<tr><td class="associate_column_left">
Date due for completion:</td><td class="associate_column_middle">
<input type="text" name="DATE_DUE[]" class="datepick" value="">
</td></tr>
</table>
<!-- End clone_upReach -->
</div>
<div class="placer_upReach"></div>
<p><a href="#" class="clone_trigger_upReach">Add another action step for upReach</a> </p>
</td></tr>
</table>
<link rel="stylesheet" type="text/css" href="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/redmond.datepick.css">
<script type="text/javascript" src="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/jquery.datepick.js"> </script>
jQuery
$('.datepick').datepick({
dateFormat: 'dd/mm/yyyy', showTrigger: '#calImg'});
// Start code for duplicating a div box
$(document).ready(function(){
// Set datepicker options
var options = {dateFormat: 'dd/mm/yy'}
$(".clone_trigger_Associate").click(function () {
// Prevent default link action
event.preventDefault();
$('input.cl:last').val('');
var $newInput = $('.clone_Associate:last').clone(true).removeAttr('id');
$(this).before($newInput);
// Calculate correct number for the checkbox array
var total = $('[name^="UPDATE_METHOD"]').length;
var index = Math.round(total / 2) - 1;
$('.clone_Associate').last().find("input[type='checkbox']").prop("name","UPDATE_METHOD["+index+"][]");
// Reinitialise the datepicker
$newInput.datepicker('destroy').datepicker(options);
});
});
$(document).ready(function(){
// Set datepicker options
var options = {dateFormat: 'dd/mm/yy', showTrigger: '#calImg'}
$(".clone_trigger_upReach").click(function () {
// Prevent default link action
event.preventDefault();
$('input.cl:last').val('');
var $newInput = $('.clone_upReach:last').clone(true).removeAttr('id');
$(this).before($newInput);
// Reinitialise the datepicker
$newInput.datepicker('destroy').datepicker(options);
});
});
// End code for duplicating a div box
您有两个问题:
- 打字错误-
.datepicker()
而不是.datepick()
$newInput.datepicker('destroy').datepicker(options);
应该是
$newInput.find('.datepick').datepick('destroy').datepick(options);
因为您应该将日期选择器附加到输入,而不是克隆的div。
http://jsfiddle.net/xTvfx/4/
相关文章:
- jquery日期选择器年份范围默认值
- jquery日期选择器失去了交互性
- 正在搜索JavaScript日期选择器滑块
- 如何在多个jQueryUI日期选择器中屏蔽特定日期
- jquery日期选择器显示与值不同的文本
- JQuery UI日期选择器:在选择出发日期时自动弹出返回日期
- Angular UI启动日期选择器问题
- 奇怪的日期选择器行为,与模糊有关
- 我希望这个日期选择器可以从1990年到2000年之间的年份中选择日期
- keith wood日期选择器日期格式和语言
- 在日期更改后更新Angular UI引导程序日期选择器选项
- Jquery UI日期选择器不关注输入
- Javascript两个日期选择器冲突
- 动态添加的标记不会'无法正确使用日期选择器
- 日期选择器无法使用javascript显示
- AngularJS自定义日期选择器指令
- 他们网站上的代码出现启动日期选择器错误
- 从第一个日期选择器定义第二个日期选择器的开始日期
- 更改日期选择器格式
- 带有推特助推器的日期选择器出现了,但没有't更改日期