Question

我知道这类问题已经被问到但是对于我的情况我有一个引导日期选择器的问题，在点击后添加一个新的字段范围后无法显示。第一个日历会正确弹出，如何在复制时弹出日历？

<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<label>Fecha de la consulta</label>
<div class="input-group date fecha_consulta1"  data-date-format="dd MM yyyy" data-link-field="dtp_input1">
<input type="text" class="form-control"  name="fecha[]" id="fecha" readonly required>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<div><input type="text" name="mytext2[]"></div>
<div><input type="text" name="mytext3[]"></div>

JS

 $(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><div class="input-group date fecha_consulta"  data-date-format="dd MM yyyy" data-link-field="dtp_input1"><input type="text" class="form-control"  name="fecha[]" id="fecha" placeholder="fecha1'+ x +'" readonly required><span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span></div><input type="text" name="mytext2[]" placeholder="field2'+ x +'"/><input type="text" name="mytext3[]" placeholder="field3'+ x +'"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})

Answer 1

我碰巧解决了我的问题：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
  <form method="post" action="info.php">
 <div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" class="datepicker" name="mytext[]" value="" size="10" /><input type="text" name="mytext[]"></div>
<input type="submit" value="send"/>
</div>
</form>

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

JS

$(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div><input type="text" class="datepicker" name="mytext[]" value="" size="10" /><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
});

  $('.datepicker').live('click', function() {
    $(this).datepicker('destroy').datepicker({changeMonth: true,changeYear: true,dateFormat: "dd-mm-yy",yearRange: "1900:+10",showOn:'focus'}).focus();
});
});

使用jquery的动态输入日历字段

1 个答案: