Javascript 引导数据选择器未显示
我查过这个问题,我知道它已经被回答了,但其他答案似乎都不适合我 我认为这可能与页面上的所有javascript有关 以下是我的HTML代码:Javascript 引导数据选择器未显示,javascript,jquery,twitter-bootstrap-3,Javascript,Jquery,Twitter Bootstrap 3,我查过这个问题,我知道它已经被回答了,但其他答案似乎都不适合我 我认为这可能与页面上的所有javascript有关 以下是我的HTML代码: <div class="form-group"> <label for="birthday">Birthday</label> <input type="text" class="form-control" name="birthday" id="birthday" > </div>
<div class="form-group">
<label for="birthday">Birthday</label>
<input type="text" class="form-control" name="birthday" id="birthday" >
</div>
如果我从输入中删除生日id并将其添加到div中,则日历在输入下始终可见,但当我单击输入时,什么也没有发生
我将包含我所有的JS代码,以防您看到冲突
以下是我的JS代码:
<!-- Loading Image Picker -->
<script src="../imgPicker/assets/js/jquery-1.11.0.min.js"></script>
<script src="../imgPicker/assets/js/jquery.Jcrop.min.js"></script>
<script src="../imgPicker/assets/js/jquery.imgpicker.js"></script>
<!-- Menu Toggle Script -->
<script>
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
</script>
<!-- Bootstrap Select Script -->
<script src="../assets/js/bootstrap-select.js"></script>
<script>
$(document).ready(function() {
$("select").selectpicker({style: 'btn btn-default', menuStyle: 'dropdown-inverse'});
});
</script>
<!-- Bootstrap Datepicker Script -->
<script src="../vendor/datepicker/js/bootstrap-datepicker.js"></script>
<script>
$(document).ready(function() {
$('#birthday').datepicker({
autoclose: true
});
});
</script>
<!-- Upload Avatar Script -->
<script>
$(function() {
var time = function(){return'?'+new Date().getTime()};
// Avatar setup
$('#avatarInline').imgPicker({
url: '../imgPicker/server/upload_avatar.php',
aspectRatio: 1,
// We use the loadComplete to set the image
loadComplete: function(image) {
// Set #avatar image src
$('#avatar').attr('src', image.name / image.versions.avatar.url);
},
deleteComplete: function() {
$('#avatar').attr('src', 'avatar/avatar.png');
this.modal('hide');
},
cropSuccess: function(image) {
$('#avatar').attr('src', image.versions.avatar.url);
this.modal('hide');
location.reload();
}
});
});
</script>
<!-- Update Avatar Script -->
<script>
function updateAvatar(object){
$.ajax({
url: 'update-avatar.php',
data: 'avatartype=' + object.value,
cache: false,
error: function(e){
alert(e);
},
success: function(response){
// Reload the page to refresh data from database
location.reload();
}
});
}
</script>
<script src="../assets/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="../assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
如果只添加我在JSFIDLE中需要的确切代码,一切看起来都很好,但由于某些原因,我无法在我的代码中使用它
有人能帮忙吗
编辑:我想我把它缩小到了CSS问题。我正在使用,当我从代码中删除它时,一切似乎都正常,但我想继续使用平面UI。有人一起使用过平板用户界面和引导数据采集器吗?或者有人知道我如何解决这个问题吗
以下是该问题的详细信息。您是否检查了此处的日期选择器文档: 看起来您缺少一些关键功能,例如:
<input class="datepicker" data-date-format="mm/dd/yyyy">
<input data-provide="datepicker">
看起来您可以使用一些数据属性,而不是所有您已经完成的脚本。我还想知道输入类型是否应该等于日期
<input type="date" class="form-control" name="birthday" id="birthday" >
这将触发HTML5日期选择器。我不知道这是否必要,但我建议重新查看文档。如果不设置fiddle,很难查找脚本冲突,但即使您有冲突,日期选择器文档也会为您提供无冲突模式
试试看 我试用了你的js和html。它似乎与绑定到输入元素的生日id一起工作。但是它缺少css/样式。 以下是一些我想尝试的东西: 尝试清除浏览器缓存 去掉不必要的js文件。看看是否可以从头开始,根据需要不断添加js。 可能是您获取js文件的来源已损坏或不正确。我下载了你提到的所有js文件,如果你想试试的话,我可以提供副本给你。
我还将研究jQuery和引导数据采集器之间的差异。您似乎将日期选择器绑定到输入元素,类似于jQuery日期选择器。仅供参考:与我的其他CSS样式存在冲突,因此我将此代码添加到datepicker3.CSS文件中:
.datepicker.dropdown-menu {
visibility: visible;
opacity: 1;
width: auto;
}
这似乎解决了问题 当我检查元素时,我可以看到选择器在那里,但在页面上不可见。我以为我加载了CSS-你知道我可能缺少什么吗?我添加了一个JSFIDLE。你能看一下吗?