关键词：
【中文标题】jquery ui datepicker无法添加新的输入字段【英文标题】：jquery ui datepicker not working on adding new input field 【发布时间】：2014-08-06 17:16:40 【问题描述】：我是 jQuery 新手，在这个问题上停留了很长一段时间。
我在单击按钮时动态添加的输入字段中使用 jQuery ui datepicker。日期选择器仅适用于输入框的第一个实例。已尝试寻找解决方案，但没有运气。任何帮助将不胜感激。谢谢
jQuery 代码
$( ".datepicker" ).datepicker(
inline: true,
dateFormat: "yy-mm-dd"
);
HTML代码
<div id="newlink">
<div>
<table style="border: 1px solid black;">
<tr>
<th>Date:</td>
<td>
<input type="text" name="linkurl[]" id="Editbox18" class="datepicker" style="width: 147px; height: 23px; z-index: 2; color: black" autocomplete="off">
</td>
</tr>
<tr>
<th>Remark:</td>
</tr>
<tr>
<td>
<textarea name="linkdesc[]" size="1" id="Editbox19" style="width: 550px; height: 45px; z-index: 2; color: black" autocomplete="off"></textarea>
</td>
</tr>
</table>
<br>
</div>
</div>
<br>
<p id="addnew">
<input onclick="new_link()" type="button" name="linkdesc[]" value="Add More" style="width: 80px; height: 24px; z-index: 136; color: black;">
</p>
<!-- Template -->
<div id="newlinktpl" style="display: none"> <font size="1.5">
<hr style="width: 75%; margin-left: -5px;" /> <br />
<div>
<table style="border: 1px solid black;">
<th>Date:
</td>
<td><input type="text" name="linkurl[]" id="Editbox"
class="datepicker"
style="width: 147px; height: 23px; z-index: 2; color: black"
autocomplete="off"></td>
</tr>
<tr>
<th>Remark:
</td>
</tr>
<tr>
<td><textarea name="linkdesc[]" size="1" id="Editbox19"
style="width: 550px; height: 45px; z-index: 2; color: black"
autocomplete="off"></textarea></td>
</tr>
<script type="text/javascript">
var ct = 1;
function new_link()
ct++;
var div1 = document.createElement('div');
div1.id = ct;
// link to delete extended form elements
var delLink = ' <input onclick="delIt(' + ct
+ ')" type="button" value="Del" style="position:relative; top:-20px; left:600px; color:black; width:50px;height:20px;z-index:136;">';
div1.innerHTML = document.getElementById('newlinktpl').innerHTML + delLink;
document.getElementById('newlink').appendChild(div1);
// function to delete the newly added set of elements
function delIt(eleId)
d = document;
var ele = d.getElementById(eleId);
var parentEle = d.getElementById('newlink');
parentEle.removeChild(ele);
</script>
</td>
</tr>
</table>
</div>
</font>
</div>
【问题讨论】：
putting datepicker() on dynamically created elements - JQuery/JQueryUI 的可能重复项 【参考方案1】：据我所知，当使用多个日期选择器时，它们需要唯一的 ID 用于该输入。因此，如果您要添加新内容，首先需要唯一的 ID。此外，文档就绪是在加载所有文档元素时发生的单个事件。所以你需要绑定到别的东西。例如
html
<div id="linkscontainer">
<div id="newlink" class="linkbox">
<div style="border:1px solid black;"> <span>Date:</span>
<span><input type="text" name="newdate[]" value="" id="dates" class="date" /><span>
<div>Remark:</div>
<textarea name="linkdesc[]" size="1" id="Editbox19" style="width:550px;height:45px;z-index:2; color:black" autocomplete="off"></textarea>
</span></span></div>
<input type="button" class="delete" name="delete" id="delete" value="delete" style="width: 80px; height: 24px; z-index: 136; color: black;">
</div>
</div>
<input type="button" id="addnew" name="linkdesc[]" value="Add More" style="width: 80px; height: 24px; z-index: 136; color: black;">
jquery
$(document).ready(function()
var container= $('#newlink').html(); // container to add
var ids=1; //id numbers for add. datepickers
$('#addnew').click(function()
$('#linkscontainer').append(container); // add container
$('.date:last').attr('id', ids);// each datepicker must have a unique id.
$('.delete:last').attr('id', 'f'+ids);// each deletebutton must have a unique id.
ids++; // increase the id numbers
);
);
$(document).on('focus',".date", function() //bind to all instances of class "date".
$(this).datepicker();
);
小提琴：
http://jsfiddle.net/M6jZL/
编辑：
删除按钮需要以同样的方式完成：
$(document).on('focus',".delete", function() //bind to all instances of class "date".
$(this).parent().remove();
);
【讨论】：
谢谢。工作得很好，但现在我无法使用删除按钮功能来删除其各自的容器。 您需要将点击功能绑定到创建的每个新删除按钮，请参阅更新的小提琴。 工作得很好...谢谢:)【参考方案2】：您需要在您创建的新输入元素中设置 datePicker，但是如何复制具有 datepicker 的输入时，您需要从新元素中删除类 hasDatePicker。试试下面的代码。
代码更新http://jsfiddle.net/L3X4D/1/
HTML
<div id="newlink">
<div>
<table style="border:1px solid black;">
<tr>
<th>Date:</td>
<td>
<input type="text" name="linkurl[]" id="Editbox18" class="datepicker" style="width:147px;height:23px;z-index:2; color:black" autocomplete="off">
</td>
</tr>
<tr>
<th>Remark:</td>
</tr>
<tr>
<td>
<textarea name="linkdesc[]" size="1" id="Editbox19" style="width:550px;height:45px;z-index:2; color:black" autocomplete="off"></textarea>
</td>
</tr>
</table>
<br>
</div>
</div>
<br>
<p id="addnew">
<input id="clickBTN" type="button" name="linkdesc[]" value="Add More" style="width:80px;height:24px;z-index:136; color:black;">
</p>
<!-- Template -->
<div id="newlinktpl" style="display:none"><font size="1.5">
<hr style="width:75%; margin-left:-5px;"/><br/>
<div>
<table style="border:1px solid black;">
<th>Date:</td>
<td> <input type="text" name="linkurl[]" id="Editbox" class="datepicker" style="width:147px;height:23px;z-index:2; color:black" autocomplete="off" >
</td></tr>
<tr>
<th>Remark:</td></tr><tr>
<td><textarea name="linkdesc[]" size="1" id="Editbox19" style="width:550px;height:45px;z-index:2; color:black" autocomplete="off" ></textarea>
</td></tr>
</td>
</tr>
</table>
</div></font>
</div>
JS
$(document).ready(function ()
$(".datepicker").datepicker(
inline: true,
dateFormat: "yy-mm-dd"
);
$("#clickBTN").click(function ()
new_link()
);
);
var ct = 1;
function new_link()
ct++;
var div1 = $('<div></div>');
$(div1).attr('id', ct);
// link to delete extended form elements
var delLink = $('<input type="button" value="Del" style="position:relative; top:-20px; left:600px; color:black; width:50px;height:20px;z-index:136;">');
//set click to remove the element
$(delLink).click(function ()
$(div1).remove();
);
$(div1).append($('#newlinktpl').html());
$(div1).append(delLink);
// remove class hasDatePicker
$(div1).find('.datepicker').removeClass("hasDatepicker");
//renema input
$(div1).find('.datepicker').attr("ID","newInput"+ct);
//set the new input element how datepicker
$(div1).find('.datepicker').datepicker(
inline: true,
dateFormat: "yy-mm-dd"
);
$('#newlink').append(div1);
// function to delete the newly added set of elements
function delIt(eleId)
d = document;
var ele = d.getElementById(eleId);
var parentEle = d.getElementById('newlink');
parentEle.removeChild(ele);
【讨论】：
谢谢。有了这个解决方案，从第二个添加的容器/元素中，选择器 ui 会显示出来，但输入框不会从中获取价值 :( 我更新了代码，插入了一行更改新选择器中的“ID”“($(div1).find('.datepicker').attr("ID","newInput" +ct);"，在小提琴中，您报告的问题已解决。请参阅此处jsfiddle.net/L3X4D/1 完美运行...谢谢 :)jQuery UI Datepicker - 禁用假期和星期六 - 添加星期五
】jQueryUIDatepicker-禁用假期和星期六-添加星期五【英文标题】：jQueryUIDatepicker-DisableHolidaysandSaturdays-AddFriday【发布时间】：2021-03-1213:29:42【问题描述】：我的Datepicker目前禁用节假日和周末。我正在尝试将星期五添加到脚本中varholi... 查看详情
在 jquery-ui datepicker 中的“今天”按钮上添加事件侦听器
】在jquery-uidatepicker中的“今天”按钮上添加事件侦听器【英文标题】：Addingeventlisteneron\'Today\'buttoninjquery-uidatapicker【发布时间】：2012-02-0310:15:22【问题描述】：我正在使用日期选择器表单jQuery-ui-1.8.16。我有以下代码：Site.Calendar... 查看详情
jQuery UI Datepicker：如何在特定日期添加可点击事件？
】jQueryUIDatepicker：如何在特定日期添加可点击事件？【英文标题】：jQueryUIDatepicker:howtoaddclickableeventsonparticulardates?【发布时间】：2011-07-3111:58:49【问题描述】：我想在jquerydatepicker上突出显示附加事件的日期（我说的不是js事件，... 查看详情
jQuery UI：DatePicker 只有 CSS？
】jQueryUI：DatePicker只有CSS？【英文标题】：jQueryUI:DatePickerONLYCSS?【发布时间】：2011-05-1700:22:21【问题描述】：我同时使用jQueryUI手风琴和datepicker。手风琴效果很好，但是当我将CSS文件添加到页面（日期选择器需要它）时，一切都... 查看详情
如何将三个不同的 Jquery Ui Datepickers 添加到单页
】如何将三个不同的JqueryUiDatepickers添加到单页【英文标题】：HowtoaddthreedifferentJqueryUiDatepickerstosinglepage【发布时间】：2019-05-2200:41:25【问题描述】：我需要将三个不同的JqueryUi日期选择器放在一个页面上。第一个日期选择器是普... 查看详情
如何将自定义类添加到我的 JQuery UI Datepicker
】如何将自定义类添加到我的JQueryUIDatepicker【英文标题】：HowtoaddacustomclasstomyJQueryUIDatepicker【发布时间】：2011-10-1312:59:40【问题描述】：我有几个触发JQueryUI日期选择器的输入，例如<inputid="one"type="text"/><inputid="two"type="text"... 查看详情
JQuery Datepicker 无法正常工作
】JQueryDatepicker无法正常工作【英文标题】：JQueryDatepickernotworkingcorrectly【发布时间】：2016-05-2014:26:39【问题描述】：解释我有下拉列表，在选择任何值后它添加了2个输入字段（日期类型）。我可以添加多个字段，如下图所示：... 查看详情
将日历 jquery 图像添加到 datepicker
】将日历jquery图像添加到datepicker【英文标题】：Addcalendarjqueryimagetodatepicker【发布时间】：2012-05-1209:04:01【问题描述】：我不确定如何将ui-iconui-icon-calendar类添加为文本字段旁边的日期选择器图像。我想要这样的东西：http://jqueryu... 查看详情
jQuery ui datepicker 与 bootstrap datepicker 冲突
】jQueryuidatepicker与bootstrapdatepicker冲突【英文标题】：jQueryuidatepickerconflictwithbootstrapdatepicker【发布时间】：2014-04-1205:19:39【问题描述】：我想使用引导日期选择器显示两个月。在谷歌上搜索后，我无法找到如何使用引导日期选择... 查看详情
jquery ui datepicker字体大小很大
】jqueryuidatepicker字体大小很大【英文标题】：jqueryuidatepickerfontsizeishuge【发布时间】：2011-02-2018:58:14【问题描述】：我试图在我的symfony应用程序中添加一个datepicker，我让它工作了，但是datepicker的大小大约是正常的3倍（在演示页... 查看详情
为啥 jQuery Datepicker 无法更改日期格式？
】为啥jQueryDatepicker无法更改日期格式？【英文标题】：WhydoesjQueryDatepickerfailtochangedateformat?为什么jQueryDatepicker无法更改日期格式？【发布时间】：2016-03-1115:48:37【问题描述】：全部：这是我正在使用的jquery版本：jQuery2.1.4jquery-UI1... 查看详情
jQuery UI Datepicker - 多个日期选择
】jQueryUIDatepicker-多个日期选择【英文标题】：jQueryUIDatepicker-MultipleDateSelections【发布时间】：2010-11-2922:32:24【问题描述】：有没有办法使用jQueryUIDatepicker小部件来选择多个日期？感谢所有帮助！如果无法使用jqueryUIdatepicker那么有... 查看详情
jQuery UI Datepicker 和 var
】jQueryUIDatepicker和var【英文标题】：jQueryUIDatepickerandvar【发布时间】：2012-09-2018:02:34【问题描述】：我似乎这辈子都无法让它发挥作用。基本上情况是这样的。我有一个函数可以执行并弹出一个jQuery对话框窗口，其中嵌入了一个... 查看详情
jQuery UI Datepicker - 禁用特定日期
】jQueryUIDatepicker-禁用特定日期【英文标题】：jQueryUIDatepicker-Disablespecificdays【发布时间】：2010-10-1505:54:45【问题描述】：是否有任何（简单的）方法可以将jQueryUIDatepicker设置为不允许选择特定的预定日期？我能够让thisapproach工作... 查看详情
为啥在我将不相关的 div 添加到 DOM 后，JQuery UI Datepicker 停止工作？
】为啥在我将不相关的div添加到DOM后，JQueryUIDatepicker停止工作？【英文标题】：WhydoesJQueryUIDatepickerstopworkingafterIaddanunrelateddivtotheDOM?为什么在我将不相关的div添加到DOM后，JQueryUIDatepicker停止工作？【发布时间】：2015-01-1814:23:00【... 查看详情
jQuery UI Datepicker - 能够选择日期或月份
】jQueryUIDatepicker-能够选择日期或月份【英文标题】：jQueryUIDatepicker-Beingabletopickdayormonth【发布时间】：2013-02-2721:00:42【问题描述】：我想知道是否有任何方法可以在jQueryUI的Datepicker中选择一整月，同时仍然可以选择一天。我尝试... 查看详情
jQuery UI：Datepicker 将年份范围下拉设置为 100 年
】jQueryUI：Datepicker将年份范围下拉设置为100年【英文标题】：jQueryUI:Datepickersetyearrangedropdownto100years【发布时间】：2012-12-0115:50:20【问题描述】：使用Datepicker，默认情况下，年份下拉菜单仅显示10年。用户必须单击最后一年才能... 查看详情
jqueryui里datepicker怎么使用动态绑定
jqueryui里datepicker怎么使用动态绑定页面开始加载时$(".datacss").datepicker(showOn:"button",buttonImage:"<%=request.getContextPath()%>/resources/images/calendar.gif",buttonImageOnly:true,changeMonth:true,changeYear:true,showButtonPanel:true,showWeek... 查看详情