php javascript - 添加删除动态表单（使用datepicker输入）

Question

我使用一些代码来克隆表单元素，但我不知道如何使用datepicker。

有人可以通过输入可以克隆的内容来更新我可以使用datepicker的代码吗？用查询ui？

//define template
var template = $('#sections .section:first').clone();

//define counter
var sectionsCount = 1;

//add new section
$('body').on('click', '.addsection', function() {

    //increment
    sectionsCount++;

    //loop through each input
    var section = template.clone().find(':input').each(function(){

        //set id to store the updated section number
        var newId = this.id + sectionsCount;

        //update for label
        $(this).prev().attr('for', newId);

        //update id
        this.id = newId;

    }).end()

    //inject new section
    .appendTo('#sections');
    return false;
});

//remove section
$('#sections').on('click', '.remove', function() {
    //fade out section
    $(this).parent().fadeOut(300, function(){
        //remove parent element (main section)
        $(this).parent().parent().empty();
        return false;
    });
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
				
			<div id="sections">
  <div class="section">
    <fieldset>
        <legend>test form - <a href="#" class='button red remove'>delete</a></legend>
        <p>
            <label for="number1">number1:</label>
            <input type="text" name="number1[]"/>
        </p>
		
		<p>
<label for="number2">number2:</label>
            <input type="text" name="number2[]"/>
        </p>
		
		<p>
            <label for="selcet1">selcet1:</label>
 	<select name="select1[]" required>
		<option value="1" >1</option>
    <option value="2" >2</option>
		</select>
        </p>

        <p>
<label for="selcet2">selcet2:</label>
        <select name="selcet2[]" required>
			<option value="1" >1</option>
      <option value="2" >2</option>
			</select>
        </p>


		<p>
<label for="date">Date:</label>
 <input type="text" name="date[]" required /> 
        </p>
		<p>
            <label for="text">text:</label>
<textarea rows=3 type="text" name="text[]" > </textarea>
        </p>

						
    </fieldset>
 
  </div>
</div>

							<a href="#" class='addsection'>add form</a>

我不知道如何通过添加日期选择器 // input type =“text”name =“date []”//我可以克隆和使用。

请有人帮助我，它有效吗？

Answer 1

JqueryUI解决方案

＆＃13;

＆＃13;

//define template
var template = $('#sections .section:first').clone();

//define counter
var sectionsCount = 1;

//add new section
$('body').on('click', '.addsection', function() {

    //increment
    sectionsCount++;

    //loop through each input
    var section = template.clone().find(':input').each(function(){

        //set id to store the updated section number
        var newId = this.id + sectionsCount;

        //update for label
        $(this).prev().attr('for', newId);

        //update id - THIS CAUSES JqueryUI Datepicker to bug, also you shouldn't use numerical only IDs
        //this.id = newId;

    }).end()

    //inject new section
    .appendTo('#sections');
    //initialize datePicker on last name=date[] element in HTML DOM
    $("input[name='date[]']").last().datepicker();
    return false;
});
//init original datePicker in HTML DOM
$("input[name='date[]']").last().datepicker();
//remove section
$('#sections').on('click', '.remove', function() {
    //fade out section
    $(this).parent().fadeOut(300, function(){
        //remove parent element (main section)
        $(this).parent().parent().empty();
        return false;
    });
    return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
			
			<div id="sections">
  <div class="section">
    <fieldset>
        <legend>test form - <a href="#" class='button red remove'>delete</a></legend>
        <p>
            <label for="number1">number1:</label>
            <input type="text" name="number1[]"/>
        </p>
		
		<p>
<label for="number2">number2:</label>
            <input type="text" name="number2[]"/>
        </p>
		
		<p>
            <label for="selcet1">selcet1:</label>
 	<select name="select1[]" required>
		<option value="1" >1</option>
    <option value="2" >2</option>
		</select>
        </p>

        <p>
<label for="selcet2">selcet2:</label>
        <select name="selcet2[]" required>
			<option value="1" >1</option>
      <option value="2" >2</option>
			</select>
        </p>


		<p>
<label for="date">Date:</label>
 <input type="text" name="date[]" required /> 
        </p>
		<p>
            <label for="text">text:</label>
<textarea rows=3 type="text" name="text[]" > </textarea>
        </p>

						
    </fieldset>
 
  </div>
</div>

							<a href="#" class='addsection'>add form</a>

＆＃13;

＆＃13;

＆＃13;

Answer 2

HTML5 DatePicker解决方案

仅在现代浏览器中支持原生HTML5 datepicker，甚至不支持所有浏览器。 只需使用type="date"代替type="text"

如果您想要100％工作日期选择器，则必须查看JqueryUI。

如果希望JqueryUI datepicker与克隆元素一起使用，则必须在克隆它们之后将新日期输入字段初始化为datepicker jquery输入元素。

＆＃13;

＆＃13;

//define template
var template = $('#sections .section:first').clone();

//define counter
var sectionsCount = 1;

//add new section
$('body').on('click', '.addsection', function() {

    //increment
    sectionsCount++;

    //loop through each input
    var section = template.clone().find(':input').each(function(){

        //set id to store the updated section number
        var newId = this.id + sectionsCount;

        //update for label
        $(this).prev().attr('for', newId);

        //update id
        this.id = newId;

    }).end()

    //inject new section
    .appendTo('#sections');
    return false;
});

//remove section
$('#sections').on('click', '.remove', function() {
    //fade out section
    $(this).parent().fadeOut(300, function(){
        //remove parent element (main section)
        $(this).parent().parent().empty();
        return false;
    });
    return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
				
			<div id="sections">
  <div class="section">
    <fieldset>
        <legend>test form - <a href="#" class='button red remove'>delete</a></legend>
        <p>
            <label for="number1">number1:</label>
            <input type="text" name="number1[]"/>
        </p>
		
		<p>
<label for="number2">number2:</label>
            <input type="text" name="number2[]"/>
        </p>
		
		<p>
            <label for="selcet1">selcet1:</label>
 	<select name="select1[]" required>
		<option value="1" >1</option>
    <option value="2" >2</option>
		</select>
        </p>

        <p>
<label for="selcet2">selcet2:</label>
        <select name="selcet2[]" required>
			<option value="1" >1</option>
      <option value="2" >2</option>
			</select>
        </p>


		<p>
<label for="date">Date:</label>
 <input type="date" name="date[]" required /> 
        </p>
		<p>
            <label for="text">text:</label>
<textarea rows=3 type="text" name="text[]" > </textarea>
        </p>

						
    </fieldset>
 
  </div>
</div>

							<a href="#" class='addsection'>add form</a>

＆＃13;

＆＃13;

＆＃13;