![](/img/trans.png)
[英]Bootstrap Datetimepicker Default Date input field empty Not working
[英]Bootstrap Datetimepicker not working with dynamic field
我有當前代碼,即bootstrap datetimepicker Bootstrap 3 Datepicker ,當前存在的問題是,當我單擊“添加更多字段”時,帶有日期時間文本的帶有文本字段的新div無法正常工作,任何想法可能是什么?
<script type="text/javascript">
$(document).ready(function() {
var max_fields = 5; //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 datepicker_init">\
<input class="form-control" type="text" name="mytext[]">\
<span class="input-group-addon">\
<span class="glyphicon glyphicon-calendar"></span>\
</span>\
</div>\
<div class="input-group date datepicker_end">\
<input class="form-control" type="text" name="mytext[]">\
<span class="input-group-addon">\
<span class="glyphicon glyphicon-calendar"></span>\
</span>\
</div>\
<a href="#" class="remove_field red-color">Remove</a>\
<div class="voffset10"></div>\
</div>\
');
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
$('.datepicker_init').datetimepicker({
locale: 'es',
format: 'YYYY-MM-DD HH:mm'
});
$('.datepicker_end').datetimepicker({
locale: 'es',
format: 'YYYY-MM-DD HH:mm',
useCurrent: false
});
$(".datepicker_init").on("dp.change", function (e) {
$('.datepicker_end').data("DateTimePicker").minDate(e.date);
});
$(".datepicker_end").on("dp.change", function (e) {
$('.datepicker_init').data("DateTimePicker").maxDate(e.date);
});
});
</script>
<div class="form-group">
<div class="input_fields_wrap">
<button class="add_field_button btn btn-info btn-block voffset10">Add More Fields</button>
<div>
<div class='input-group date datepicker_init'>
<input class="form-control" type="text" name="mytext[]">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date datepicker_end'>
<input class="form-control" type="text" name="mytext[]">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="voffset10">
</div>
</div>
更新部分
$(".datepicker_init").on("dp.change", function (e) {
$('.datepicker_end').data("DateTimePicker").minDate(e.date);
});
$(".datepicker_end").on("dp.change", function (e) {
$('.datepicker_init').data("DateTimePicker").maxDate(e.date);
});
在添加新的html之后,立即在點擊處理程序中調用datepicker初始化腳本,如下所示:
$(add_button).click(function(e){
// on add input button click
e.preventDefault();
// max input box allowed
// Reduce nesting!
if(x >= max_fields){
return
}
//text box increment
x++;
var tmp = $(wrapper).append('<div>\
<div class="input-group date datepicker_init">\
<input class="form-control" type="text" name="mytext[]">\
<span class="input-group-addon">\
<span class="glyphicon glyphicon-calendar"></span>\
</span>\
</div>\
<div class="input-group date datepicker_end">\
<input class="form-control" type="text" name="mytext[]">\
<span class="input-group-addon">\
<span class="glyphicon glyphicon-calendar"></span>\
</span>\
</div>\
<a href="#" class="remove_field red-color">Remove</a>\
<div class="voffset10"></div>\
</div>');
// Init the new pickers
$('.datepicker_init', tmp).datetimepicker({
locale: 'es',
format: 'YYYY-MM-DD HH:mm'
});
$('.datepicker_end', tmp).datetimepicker({
locale: 'es',
format: 'YYYY-MM-DD HH:mm',
useCurrent: false
});
});
首先,當$(document).ready不在動態div創建時間中發生時,datetimepicker綁定就發生在div上,因為add_button click事件創建了這次未綁定datetimepicker的動態div。 因此,在創建動態div之后,您必須同時為此div綁定datetimepicker。 下面的更改可以幫助您了解-
將下面的代碼放置到任何函數中,並同時在document.ready時間和div創建時間中調用此函數
function yourfunction(){
$('.datepicker_init').datetimepicker({
locale: 'es',
format: 'YYYY-MM-DD HH:mm'
});
$('.datepicker_end').datetimepicker({
locale: 'es',
format: 'YYYY-MM-DD HH:mm',
useCurrent: false
});
}
所以最后您的腳本看起來像這樣
$(document).ready(function() {
var max_fields = 5; //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 datepicker_init">\
<input class="form-control" type="text" name="mytext[]">\
<span class="input-group-addon">\
<span class="glyphicon glyphicon-calendar"></span>\
</span>\
</div>\
<div class="input-group date datepicker_end">\
<input class="form-control" type="text" name="mytext[]">\
<span class="input-group-addon">\
<span class="glyphicon glyphicon-calendar"></span>\
</span>\
</div>\
<a href="#" class="remove_field red-color">Remove</a>\
<div class="voffset10"></div>\
</div>\
');
}
yourfunction();
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
yourfunction();
$(".datepicker_init").on("dp.change", function (e) {
$('.datepicker_end').data("DateTimePicker").minDate(e.date);
});
$(".datepicker_end").on("dp.change", function (e) {
$('.datepicker_init').data("DateTimePicker").maxDate(e.date);
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.