Return Bootstrap Datepicker date

JavaScript
1

I’m using the Twitter Bootstrap datepicker and have run into a little issue.

What I want to do is, when the user selects a date, to submit the form and search my db for that date. I’m having a difficult time getting the datapicker to return the date.

<form action="call_list.php" method="get" id="change-date">
    <div class="input-append datepicker" id="dp3" data-date="2013-02-26" data-date-format="yyyy-mm-dd">
        <input size="16" type="text" name="date" id="date" value="">
        <span class="add-on" rel="tooltip" title="choose date"><i class="icon-calendar"></i></span>
    </div>
</form>
</div>


<script>
    $(document).ready(function(){
        $('#dp3').on('changeDate', function(ev) {
            var date = $('#date').val();
            alert(date);
            $('#change-date').submit();
        });
    });
</script>
2

Hi there,

I can’t reproduce your error from the code you have provided, so if you could you post a link to somewhere where I can see this not working, I don’t mind taking a look.

FWIW, I can’t see any obvious error in your code.

3

Thanks,

It’s not generating an error, it’s just not getting the date. When the alert window pops up it’s empty, and when the form submits it doesn’t have the date in the URL.

I’ve attached the complete code, using CDNs to make it a little easier for anybody to help. :slight_smile:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Untitled</title>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>


<form action="date.html" method="get" id="change-date">
    <div class="input-append datepicker" id="dp3" data-date="2013-02-26" data-date-format="yyyy-mm-dd">
        <input size="16" type="text" name="date" id="date">
        <span class="add-on" rel="tooltip" title="choose date"><i class="icon-calendar"></i></span>
    </div>
</form>
</div>


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="http://www.eyecon.ro/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script>
    $(document).ready(function(){
        $('.datepicker').datepicker()
        $('#dp3').on('changeDate', function() {
            var date = $('#date').val();
            alert(date);
            return false; // for testing...
            $('#change-date').submit();
        });
    });
</script>
</body>
</html>
4

Hi Tim,

You’re missing a class of “date” on the containing <div> element.

This:

<div class="input-append datepicker" id="dp3" data-date="2013-02-26" data-date-format="yyyy-mm-dd">

should be:

<div class="input-append datepicker date" id="dp3" data-date="2013-02-26" data-date-format="yyyy-mm-dd">

You might also want to consider console.log() for debugging purposes, instead of alert().

Here’s a simple tutorial: Simple JavaScript debugging with Chrome’s console

HTH

5

Excellent! Thank you so much! :slight_smile: