How do I use datepicker with bootstrap 3

[Trepi Dacious]

Hi,

I've been trying to get version 1.3.0 working with Bootstrap 3 - looks like this should work. I've got the js and css directories from the zip in my resources directory, and I'm using the datepicker3.css and bootstrap-datepicker.js files. I've got an input, and I've got a jQuery script to set it up, but nothing happens when I click the input.

Can anyone point me at a really simple HTML page with the correct contents? I've tried to work out what is going on in the "Online Demo" but since it's got a lot of script in there, it really doesn't work as a simple example of how to set things up.

Thanks,

Ben.

[Andrew Rowls]

Here's a simple jsfiddle demonstration: http://jsfiddle.net/wbmNG/

What does the js you're using to initialize it look like? Make sure that if you're calling .datepicker, you're doing so after DOMContentReady; ie

$(function(){
$('...').datepicker();
});

> --
> You received this message because you are subscribed to the Google Groups "bootstrap-datepicker" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to bootstrap-datepi...@googlegroups.com.
> To post to this group, send email to bootstrap-...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/bootstrap-datepicker/f57bcf96-ce9d-4b98-95a5-1100c9a3c85f%40googlegroups.com.

[Trepi Dacious]

Thanks, that was pretty much the problem, I've got scripts at the end of the body section so I needed to make sure that jquery was before the datepicker script, and that the datepicker() script was only called on dom ready, it all works fine now.

Thanks again,

Ben.

 

[Steve Klein]

Eternicode(Andrew),

First of all, thanks for the super slick calendar.  I only wish I could get it working...  I'm getting 404 on your jsfiddle demo - can you repost it easily?

As for my non-working code...:

• I am linking in a local copy of your datepicker3 CSS
• I am pulling in jQuery by reference from https://code.jquery.com/jquery.js
• I am linking in local copies of bootstrap.min.js (Bootstrap) and bootstrap-datepicker.js (after jQuery)
  
• I have an input field:

<input class="form-control" type="text" id="startdate" name="startdate" >

• At the end of the body (after startdate), I have:

    <script>
        $function() {
            $('#startdate').datepicker({
                todayBtn: "linked",
                autoclose: true
            });
        }
    </script>

... yet no pretty calendar when I click on the field.

Thanks in advance for any help.

Steve

[Andrew Rowls]

Here's the simple example again: http://jsfiddle.net/MfGz7/ Though, to be honest, this is essentially just the plain "text input" html and js that the online demo will give you.

Everything you described looks good except for this:

> $function() {

The `$` variable is an alias to the jQuery function (if you have jquery on the page, anyway), so you actually want to call $() with a function as the argument:

$(function(){
...
});

On 02/08/2014 12:56 PM, Steve Klein wrote:
> Eternicode(Andrew),
>
> First of all, thanks for the super slick calendar. I only wish I could get it working... I'm getting 404 on your jsfiddle demo - can you repost it easily?
>
> As for my non-working code...:
>

> * I am linking in a local copy of your datepicker3 CSS
> * I am pulling in jQuery by reference from https://code.jquery.com/jquery.js
> * I am linking in local copies of bootstrap.min.js (Bootstrap) and bootstrap-datepicker.js (after jQuery)
> * I have an input field:

>
> <input class="form-control" type="text" id="startdate" name="startdate" >
>

> * At the end of the body (after startdate), I have:

> --
> You received this message because you are subscribed to the Google Groups "bootstrap-datepicker" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to bootstrap-datepi...@googlegroups.com.
> To post to this group, send email to bootstrap-...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/bootstrap-datepicker/63edafbc-3ac0-4598-b743-6bab68371318%40googlegroups.com.

[Steve Klein]

Thanks for your quick response, Andrew.  I feel pretty stupid about the jQuery mistake, but I still can't even get a simple version working.  I am guessing I have a problem with one of my external references since my code is so simple (and matches yours):

<!DOCTYPE html>
<html>
<head>
    <title>Test Calendar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/datepicker3.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script type="text/javascript src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script type="text/javascript src="js/bootstrap.min.js"></script>
    <script type="text/javascript src="js/bootstrap-datepicker.js"></script>
</head>
<body>
    <div class="container">
        <form method="POST">

            <input class="form-control" type="text">

        </form>
    </div>
    <script>
        $('input').datepicker();
    </script>
</body>
</html>

Thanks again - I think I need a little datepicker vacation and then maybe it will all be clear.

Steve

[Andrew Rowls]

No worries, I know how it can feel when you're banging your head against a problem that seems like it should be obvious.

In your script tags, your type attributes are missing some crucial closing quotes:

> <script type="text/javascript src="https://code.jquery.com/jquery.js"></script>

> <script type="text/javascript src="js/bootstrap.min.js"></script>
> <script type="text/javascript src="js/bootstrap-datepicker.js"></script>

That should fix it for you ;)

> > * I am pulling in jQuery by reference from https://code.jquery.com/jquery.js <https://code.jquery.com/jquery.js>

[Steve Klein]

You're the best Andrew - that did the trick.

*major head slap*

Steve <-- considering turning in Comp Sci degree

[Nimesh Dani]

Hello,

We are using the Bootstrap Datepicker on a Modal Popup in an ASP.NET MVC Project.

We are facing the following issues -

Being a modal popup, we are posting the form via an Ajax request. However, strangely, if a date is selected in the datepicker element, the Ajax code never runs. 

On the contrary, if there is no date being selected in the datepicker, it does show a client-side validation correctly.

Can someone help with this please?

Thanks.