我已经在这个问题上工作了一个星期,但是对于bootstrap是新手,我无法找到解决方案。
我有一个表单,除了运行addItem();
函数之外,它的效果很好一旦我这样做,就不会显示日期选择器或时间选择器。这组项目工作正常:
<div class="form-group">
<div class="row">
<div id="servicetime" class="col-sm-6 col-md-6">
<h4>Date In</h4>
<div class="input-group">
<input id="date_in_1" name="date_in_1" type="text" class="date start form-control">
<span class="input-group-addon"><?if($requiredfield=="Yes") echo '<i class="glyphicon glyphicon-ok form-control-feedback"></i>';?></span>
</div>
<h4>Time In</h4>
<div class="input-group">
<input id="time_in_1" name="time_in_1" type="text" class="time start form-control">
<span class="input-group-addon"><?if($requiredfield=="Yes") echo '<i class="glyphicon glyphicon-ok form-control-feedback"></i>';?></span>
</div>
<h4>Time Out</h4>
<div class="input-group">
<input id="time_out_1" name="time_out_1" type="text" class="time end form-control">
<span class="input-group-addon"><?if($requiredfield=="Yes") echo '<i class="glyphicon glyphicon-ok form-control-feedback"></i>';?></span>
</div>
<div style="display:none" class="input-group">
<input id="date_out_1" name="date_out_1" type="text" class="date end form-control" readonly>
<span class="input-group-addon"><?if($requiredfield=="Yes") echo '<i class="glyphicon glyphicon-ok form-control-feedback"></i>';?></span>
</div>
</div>
</div>
</div>
<script>
// initialize input widgets first
$('#time_in_1').timepicker({
'showDuration': true,
'timeFormat': 'g:ia',
'step': 15
});
$('#date_in_1').datepicker({
'format': 'm/d/yyyy',
'autoclose': true
});
$('#time_out_1').timepicker({
'showDuration': true,
'timeFormat': 'g:ia',
'step': 15
});
$('#date_out_1').datepicker({
'format': 'm/d/yyyy',
'autoclose': true
});
// initialize datepair
var basicExampleEl = document.getElementById('servicetime');
var datepair = new Datepair(basicExampleEl);
</script>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="children_1"># of Children:</label>
<div class="input-group">
<input type="number" class="form-control" name="children_1" min="1" max="5" id="children_1" placeholder="#" required >
<span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span>
</div>
</div>
</div>
</div>
</div>
<div id="itemDiv"></div>
<div> <a class="btn btn-primary" href="javascript:addItem()"><i>Different amount of kids for different amounts of hours then add more time frames.</i></a></div>
运行此功能后,我收到上述错误。
function addItem()
{
var numberOfItems = Number($('#entry_count').val()) + 1;
$('#entry_count').val(numberOfItems);
var sTextToAdd = '<div class="form-group"><div class="row"><div id="servicetime'+numberOfItems+'" class="col-sm-6 col-md-6"><h4>Date In</h4><div class="input-group">';
sTextToAdd += '<input id="date_in_'+numberOfItems+'" name="date_in_'+numberOfItems+'" type="text" class="date start form-control">';
sTextToAdd += '<span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span> </div>';
sTextToAdd += '<h4>Time In</h4> <div class="input-group"> <input id="time_in_'+numberOfItems+'" name="time_in_'+numberOfItems+'" type="text" class="time start form-control">';
sTextToAdd += '<span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span></div>';
sTextToAdd += '<h4>Time Out</h4><div class="input-group"><input id="time_out_'+numberOfItems+'" name="time_out_'+numberOfItems+'" type="text" class="time end form-control">';
sTextToAdd += '<span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span></div>';
sTextToAdd += '<div style="display:none" class="input-group"><input id="date_out_'+numberOfItems+'" name="date_out_'+numberOfItems+'" type="text" class="date end form-control" readonly>';
sTextToAdd += '<span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span></div></div></div></div>';
sTextToAdd += '<br />';
$('#itemDiv').append(sTextToAdd);
// initialize input widgets first
$('#time_in_'+numberOfItems).timepicker({
'showDuration': true,
'timeFormat': 'g:ia',
'step': 15
});
$('#date_in_'+numberOfItems).datepicker({
'format': 'm/d/yyyy',
'autoclose': true
});
$('#time_out_'+numberOfItems).timepicker({
'showDuration': true,
'timeFormat': 'g:ia',
'step': 15
});
$('#date_out_'+numberOfItems).datepicker({
'format': 'm/d/yyyy',
'autoclose': true
});
$('#time_in_'+numberOfItems).ptTimeSelect();
$('#time_out_'+numberOfItems).ptTimeSelect();
var basicExampleEl = document.getElementById('servicetime_'+numberOfItems);
var datepair = new Datepair(basicExampleEl);
}
我尝试在页面末尾运行该函数的脚本,但是在插入输入之后才能加载它。我想做一个for循环并在页面加载时在脚本之前添加函数项,然后使用一个按钮从style =“display:none;”中显示它们,但我觉得它很草率。
我尝试了列出here的解决方案,但这也没有用。
对此的任何帮助将不胜感激。
答案 0 :(得分:2)
你的bootstrap timepicker或datepicker js文件应该在标题中的页脚和jquery min.js
在标题中:
<script src="/js/jquery-1.11.1.min.js"></script>
页脚:
<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-timepicker.min.js"></script>
如果有帮助,请尝试这样做。