[英]Bootstrap-datepicker not displaying
I have looked up this question and I know it has been answered, but none of the other answers seem to work for me. 我已经查询了这个问题,我知道它已被回答,但其他答案似乎都不适合我。
I think it might have something to do with all of the javascript on the page. 我认为它可能与页面上的所有javascript有关。
Here is my HTML code: 这是我的HTML代码:
<div class="form-group">
<label for="birthday">Birthday</label>
<input type="text" class="form-control" name="birthday" id="birthday" >
</div>
If I remove the birthday id from the input and add it to the div the calendar is visible at all times under the input, but when I click into the input nothing happens 如果我从输入中删除了生日id并将其添加到div中,则日历在输入下始终可见,但是当我点击输入时没有任何反应
I am going to include all of my JS code just in case you see a conflict Here is my JS code: 我将包括我的所有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>
If add just the exact code I need in JSFiddle everything seemed to work fine, but for some reason I cannot get it to work in my code. 如果只添加我在JSFiddle中需要的确切代码,一切似乎工作正常,但由于某种原因,我不能让它在我的代码中工作。
Can someone please help? 有人可以帮忙吗?
EDIT: I think I narrowed it down to a CSS issue. 编辑:我想我把它缩小到CSS问题。 I am using Flat UI and when I remove this from my code everything seems to work, but I would like to continue using Flat UI.
我正在使用Flat UI ,当我从我的代码中删除它时,一切似乎都有效,但我想继续使用Flat UI。 Has anyone worked with Flat UI and Bootstrap datepicker together?
有没有人一起使用Flat UI和Bootstrap datepicker? or does anyone know how I can resolve this issue?
或者有谁知道如何解决这个问题?
Have you checked the Date Picker docs here: 您是否在此处查看了日期选择器文档:
Bootstrap Date Picker Docs 引导日期选择器文档
Looks like you're missing some key features such as: 看起来你缺少一些关键功能,例如:
<input class="datepicker" data-date-format="mm/dd/yyyy">
<input data-provide="datepicker">
It looks like there are "data-attributes" you can use rather than all the scripting you have done. 看起来你可以使用“数据属性”,而不是你所做的所有脚本。 I also wonder if input type should equal "date".
我也想知道输入类型是否应该等于“日期”。
<input type="date" class="form-control" name="birthday" id="birthday" >
Which will trigger the HTML5 date-picker. 这将触发HTML5日期选择器。 Don't know if that's necessary or not but I would suggest revisiting the docs.
不知道是否有必要,但我建议重新访问这些文档。 Without a fiddle set up, it's hard to look for scripting conflicts but even if you have them the date-picker docs provide you with a "no conflict mode".
没有小提琴设置,很难找到脚本冲突,但即使你有它们,日期选择器文档也为你提供了“无冲突模式”。
Give it a try! 试试看!
I tried out your js and html. 我试过你的js和html。 It seems to work with "birthday" id tied to the input element.
它似乎与“生日”id绑定到输入元素。 It is missing the css/ styles though.
它缺少css / styles。 Here are some things I would try:
以下是我会尝试的一些事情:
I will also look at differences between jQuery and bootstrap datepickers. 我还将介绍jQuery和bootstrap datepickers之间的区别。 You seem to have datepicker tied to input element similar to jQuery date picker.
您似乎将datepicker绑定到类似于jQuery日期选择器的input元素。 For reference : http://jqueryui.com/datepicker/
供参考: http : //jqueryui.com/datepicker/
There was a conflict with my other CSS styles so I added this code to the datepicker3.css file: 与我的其他CSS样式存在冲突,因此我将此代码添加到datepicker3.css文件中:
.datepicker.dropdown-menu {
visibility: visible;
opacity: 1;
width: auto;
}
This seemed to have fixed the problem. 这似乎解决了这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.