Bootstrap-datepicker not displaying

Question

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.

Here is my HTML code:

<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

I am going to include all of my JS code just in case you see a conflict Here is my JS code:

<!-- 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.

Can someone please help?

EDIT: I think I narrowed it down to a CSS issue. 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. Has anyone worked with Flat UI and Bootstrap datepicker together? or does anyone know how I can resolve this issue?

Here is a JSFiddle of the issue.

Answer 1

There was a conflict with my other CSS styles so I added this code to the datepicker3.css file:

.datepicker.dropdown-menu {
 visibility: visible;
 opacity: 1;
 width: auto;
}

This seemed to have fixed the problem.

Answer 2

I tried out your js and html. It seems to work with "birthday" id tied to the input element. It is missing the css/ styles though. Here are some things I would try:

• Try clearing the browser cache
• Get rid of unnecessary js files. See if you can start from scratch and keep adding js as needed.
• May be the source from where you got the js files is corrupted or not correct. (I downloaded all the js files you mentioned, I can provide you the copies if you want to try those.)

I will also look at differences between jQuery and bootstrap datepickers. You seem to have datepicker tied to input element similar to jQuery date picker. For reference : http://jqueryui.com/datepicker/

Answer 3

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. 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!