SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Return Bootstrap Datepicker date

    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.

    Code HTML4Strict:
    <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. #2
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #3
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code HTML4Strict:
    <!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. #4
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi Tim,

    You're missing a class of "date" on the containing <div> element.

    This:

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

    HTML Code:
    <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. #5
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent! Thank you so much!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •