2

In the past the systems I have built have used the jQuery datepicker and it worked great. Recently I decided to move to using twitter bootstrap for my designs and quickly learned that it doesn't like the jQuery UI.

I'm trying to get http://www.eyecon.ro/bootstrap-datepicker/ working at the moment.

I've viewed all the similar questions and their solutions, but cannot seem to find any that directly apply to my situation.

The JavaScript:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="icon" type="image/ico" href="../images/favicon.ico">
<script type="text/javascript" src="js/tinybox.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/bootstrap-datepicker.js"></script>

<script>
    $('#date').datepicker();
    function delete(id)  
        {
        var r=confirm("Are you sure you want to delete?")
            if (r==true)
            {
                location.href = "delete.php?id=" + id;
            }
        }
    function single(id)
        {
            TINY.box.show({iframe:'../view.php?id=' + id,boxid:'frameless',width:550,height:170,fixed:false,maskid:'bluemask',maskopacity:40,closejs:function(){closeJS()}})
        }
</script>

The html:

<input name="date" class="src_date" type="textarea" placeholder="DD-MM-YYYY" id="date" required>

I have also tried with the JS:

$(function() {
    $("#date").datepicker({dateFormat: 'dd-mm-yyyy'});
});
Improve this question

3 Answers 3

Reset to default
2

This issue is often the result of a JS conflict, where another plugin is causing the $ variable to behave abnormally. To get around this just wrap your function with jQuery:

$('#date').datepicker();

=> 

jQuery(function($){
    $("#date").datepicker({format: 'dd-mm-yyyy'});
});

also your dateFormat parameters are for jQuery UI, for bootstrap datepicker just use format as I have used in the above example.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

As if this is not working:

$(function() {
   $("#date").datepicker({dateFormat: 'dd-mm-yyyy'});
});

then it seems to be that you have to load your jQuery library first then other libs:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/tinybox.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
Improve this answer

1 Comment

Unfortunately making this change has not fixed the issue. However when checking that none of my scripts are returning a 404 in console, i noticed an error referring to the datepicker function in your answer (Uncaught TypeError: Object [object Object] has no method 'datepicker')
0

Load tinybox after jquery and check you have downloaded datepicker and tinybox js like,

Otherwise try this,

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://sandbox.scriptiny.com/tinybox2/tinybox.js"></script>
<script src="http://www.eyecon.ro/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script>
$(function() {
   $("#date").datepicker({dateFormat: 'dd-mm-yyyy'});
});
</script>

Live Demo

Improve this answer

3 Comments

Unfortunately making this change has not fixed the issue. However when checking that none of my scripts are returning a 404 in console, i noticed an error referring to the datepicker function in your answer (Uncaught TypeError: Object [object Object] has no method 'datepicker')
I replaced my scripts with those you used for the demo including the ordering, however nothing happens when clicking into the date field. When viewing the console it gives: GET eyecon.ro/bootstrap-datepicker/js/bootstrap-datepicker.js 404 (Not Found) along with the previous console error
You can find it in my original post, with the date function (which you used in example) instead of the $('#date').datepicker();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.