Question

我正在一个应用程序中工作，我必须生成多个文本框，我还需要在其中添加timepicker。现在在我的应用程序中，我能够动态创建多个文本框。但是我无法将timepicker放在上面那是我的代码

$(function () {
$("#btnAdd").bind("click", function () {
    var div = $("<div />");
    div.html(GetDynamicTextBox(""));
    $("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function () {
    var valuesarr = new Array();   
    var phonearr = new Array();  
    var phonearr1 = new Array(); 
    $("input[name=DynamicTextBox]").each(function () {
        valuesarr.push($(this).val());
        $('#DynamicTextBox').val(valuesarr);
    });
    $("input[name=phoneNum]").each(function () {
        phonearr.push($(this).val());
        $('#phoneNum').val(phonearr);
    });

    $("input[name=phoneNum1]").each(function () {
        phonearr1.push($(this).val());
        $('#phoneNum1').val(phonearr1);
    });

    alert(valuesarr); alert(phonearr);alert(phonearr1);
});

$("body").on("click", ".remove", function () {
    $(this).closest("div").remove();
});

});


function GetDynamicTextBox(value) {
   return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;<input id="myPicker" class="time" type="text" />&nbsp;<input name = "phoneNum1" type="text" /><input type="button" value="Remove" class="remove" />';
}

这是小提琴我想在第2和第3个框中添加两个时间戳

DEMO 有人提供帮助

Answer 1

使用这个： $("#myPicker").timepicker(); //在添加点击时添加此项。如果您愿意创建多个时间选择器，请更好地使用class.you可以使用：$(".time").timepicker();其中time是附加到输入字段的类。

＆＃13;

$(function () {
    $("#btnAdd").bind("click", function () {
        var div = $("<div />");
        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
       // $("#myPicker").timepicker();//add this
        $(".time").timepicker();
    });
    $("#btnGet").bind("click", function () {
        var valuesarr = new Array();   
        var phonearr = new Array();  
        var phonearr1 = new Array(); 
        $("input[name=DynamicTextBox]").each(function () {
            valuesarr.push($(this).val());
            $('#DynamicTextBox').val(valuesarr);
        });
        $("input[name=phoneNum]").each(function () {
            phonearr.push($(this).val());
            $('#phoneNum').val(phonearr);
        });
        
        $("input[name=phoneNum1]").each(function () {
            phonearr1.push($(this).val());
            $('#phoneNum1').val(phonearr1);
        });
       
        alert(valuesarr); alert(phonearr);alert(phonearr1);
    });
    
    $("body").on("click", ".remove", function () {
        $(this).closest("div").remove();
    });
    
});

function GetDynamicTextBox(value) {
       return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;<input id="myPicker" class="time" type="text" />&nbsp;<input name = "phoneNum1" id="phoneNum1" class="time"  type="text" /><input type="button" value="Remove" class="remove" />';
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="http://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">
<div id="TextBoxContainer">
<input id="btnAdd" type="button" value="Add" />
</div>

＆＃13;

如何使用时间选择器创建动态文本框

1 个答案: