如何使用时间选择器创建动态文本框
How to create a dynamic text box with time picker
我在一个应用程序中工作,我必须生成多个文本框,而且我还需要在其中添加时间选择器。现在在我的应用程序中我能够创建多个文本框dynamically.But我不能将时间选择器放在 that.Here 上是我的代码
$(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 + '" /> <input id="myPicker" class="time" type="text" /> <input name = "phoneNum1" type="text" /><input type="button" value="Remove" class="remove" />';
}
这里是 fiddle 我想在第 2 和第 3 个框中添加两个时间选择器
DEMO
有人请帮忙
使用这个:
$("#myPicker").timepicker();
//在添加上添加这个 click.if 你愿意创建多个时间选择器更好地使用 class.you 可以使用:$(".time").timepicker();
也可以使用 class 附加的时间到输入字段。
$(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 + '" /> <input id="myPicker" class="time" type="text" /> <input name = "phoneNum1" id="phoneNum1" class="time" type="text" /><input type="button" value="Remove" class="remove" />';
}
<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>
我在一个应用程序中工作,我必须生成多个文本框,而且我还需要在其中添加时间选择器。现在在我的应用程序中我能够创建多个文本框dynamically.But我不能将时间选择器放在 that.Here 上是我的代码
$(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 + '" /> <input id="myPicker" class="time" type="text" /> <input name = "phoneNum1" type="text" /><input type="button" value="Remove" class="remove" />';
}
这里是 fiddle 我想在第 2 和第 3 个框中添加两个时间选择器
DEMO 有人请帮忙
使用这个:
$("#myPicker").timepicker();
//在添加上添加这个 click.if 你愿意创建多个时间选择器更好地使用 class.you 可以使用:$(".time").timepicker();
也可以使用 class 附加的时间到输入字段。
$(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 + '" /> <input id="myPicker" class="time" type="text" /> <input name = "phoneNum1" id="phoneNum1" class="time" type="text" /><input type="button" value="Remove" class="remove" />';
}
<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>