将日期选择器动态添加到文本框中

Dynamically adding datepicker into a textbox

本文关键字：文本 添加 日期 选择器 动态      更新时间：2023-09-26

当我的页面加载时，我有一行，通过单击添加按钮，它将再添加一行。但从下面的代码来看，日期选择器只显示第一行，而不是动态添加行。如果我删除"第2部分"代码，则反向操作将起作用。我两者都需要。请帮忙。

//===========portion 1============
var i = 0;  
$(document).ready(function() {
    $("#add").click(function() {
        i++;
        $(".normal-tble tbody tr:first").clone().find("input,img").each(function() {
            var tempId = $(this).attr("id");
            var name_Attr = $(this).attr("name");
            $(this).attr("id",$(this).attr("id")+"_"+(i))
            if(tempId!='availability' && tempId!='remove') {
                $(this).attr("name",name_Attr.replace('0',i));
                if(tempId=='number') {
                    $(this).on("blur",isValidNumber);
                    $(this).val(0);
                } else {
                    $(this).val('');
                }
                if(tempId=='expectedServiceDate') {
                    $(this).datepicker({changeMonth: true,changeYear: true,showButtonPanel: true,dateFormat: 'yy-mm-dd',minDate:0});
                }
            } else if(tempId=='availability') {
                $(this).on("click",checkAvaialability);
            } else if(tempId=='remove') {
                $(this).on("click",onRemove);
            }        
        }).end().appendTo(".normal-tble");
    });
//=======portion 2===============
$('#expectedServiceDate').datepicker({changeMonth: true,changeYear: true,showButtonPanel: true,dateFormat: 'yy-mm-dd',minDate:0});
//==============================================================
<table class="normal-tble">
    <thead>
        <tr>                        
            <th scope="col">Number</th>
            <th scope="col">For Service</th>
            <th scope="col">Expected Service Date</th>
            <th scope="col">Comments</th>
            <th scope="col">Check Availability</th>
            <th scope="col">Remove</th>
            <th scope="col"><img src="<c:url value="/resources/images/add2.png"/>" width="18" height="17" id="add"></th>
        </tr>
    </thead>
    <tbody>
        <tr class="second">
            <td style="text-align:center"><form:input path="premiumList[0].number" id="number" class="tfl-02 qtyText"/></td>
            <td style="text-align:center"><form:input path="premiumList[0].forService" id="forService" class="tfl-02"/></td>
            <td style="text-align:center"><form:input path="premiumList[0].expectedServiceDate" id="expectedServiceDate" class="tfl-02" readonly="true"/></td>
            <td style="text-align:center"><form:input path="premiumList[0].comments" id="comments" class="tfl-02"/></td>
            <td style="text-align:center"><img src="<c:url value="/resources/images/view.png"/>" alt="view" id="availability"></td>
            <td style="text-align:center"><img src="<c:url value="/resources/images/remove.png"/>" alt="remove" id ="remove"></td>
            <td></td>
        </tr>
    </tbody>
</table>

这是因为元素尚未创建。为了对动态行进行事件处理，您需要以下内容：

$("body").on("focus", ".mydate", function () {
    $(this).datepicker({
        todayBtn: "linked"
    })
});
相关文章：