18

i am trying to get date from my implementation of jquery date picker, add it to a string and display the resulting image in my div. Something however is just not working. Can anyone check out the code and have a look at it?

The code is supposed to take the date from date picker, combine it in a string which is to have the necessary code to display tag, images are located in /image and in the format aYY-MM-DD.png, new to this date picker and can't quite get it down yet.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.custom.css" rel="stylesheet" />  
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // Datepicker
            $('#datepicker').datepicker({
                dateFormat: 'yy-mm-dd',
                inline: true,
                minDate: new Date(2010, 1 - 1, 1),
                maxDate:new Date(2010, 12 - 1, 31),
                altField: '#datepicker_value',  
            });             
            //hover states on the static widgets
            $('#dialog_link, ul#icons li').hover(
                function() { $(this).addClass('ui-state-hover'); }, 
                function() { $(this).removeClass('ui-state-hover'); }
            );          
        });
        //var img_date = .datepicker('getDate');
            var day1 = $("#datepicker").datepicker('getDate').getDate();                 
            var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1;             
            var year1 = $("#datepicker").datepicker('getDate').getFullYear();
            var fullDate = year1 + "-" + month1 + "-" + day1;
    var str_output = "<h1><center><img src=\"/images/a" + fullDate + ".png\"></center></h1><br/><br>";
    page_output.innerHTML = str_output;
    // writing the results to the div element (page_out)
    </script>
</head>
<body style="background-color:#000;color:#fff;margin: auto auto;">



    <!-- Datepicker -->

    <div id="datepicker"></div>

    <!-- Highlight / Error -->
    <p>Date Value: <input type="text" id="datepicker_value" /></p>
    <div id="page_output" style="text-align:center; margin-top:80px; margin-bottom:20px; "></div>


</body>

brass
  • 612
  • 2
  • 5
  • 15

5 Answers5

43

I think you would want to add an 'onSelect' event handler to the initialization of your datepicker so your code gets triggered when the user selects a date. Try it out on jsFiddle

$(document).ready(function(){
    // Datepicker
    $('#datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        inline: true,
        minDate: new Date(2010, 1 - 1, 1),
        maxDate:new Date(2010, 12 - 1, 31),
        altField: '#datepicker_value',
        onSelect: function(){
            var day1 = $("#datepicker").datepicker('getDate').getDate();                 
            var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1;             
            var year1 = $("#datepicker").datepicker('getDate').getFullYear();
            var fullDate = year1 + "-" + month1 + "-" + day1;
            var str_output = "<h1><center><img src=\"/images/a" + fullDate +".png\"></center></h1><br/><br>";
            $('#page_output').html(str_output);
        }
    });
});
AdmSteck
  • 1,753
  • 15
  • 25
  • Updated to include the correct jQuery syntax like Jeremy and dcloud suggested. – AdmSteck Apr 01 '10 at 20:14
  • that did the trick, i can display the date selected, my img code is messed up somehow, easily remedied now than i can just display something. Thanks for the help everyone – brass Apr 01 '10 at 20:27
  • If this is the answer that fixed you problem then you should probably check it so future readers know. – AdmSteck Apr 06 '10 at 17:03
2

Instead of parsing day, month and year you can specify date formats directly using datepicker's formatDate function. In my example I am using "yy-mm-dd", but you can use any format of your choice.

$("#datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
    inline: true,
    minDate: new Date(2010, 1 - 1, 1),
    maxDate: new Date(2010, 12 - 1, 31),
    altField: '#datepicker_value',
    onSelect: function(){
        var fullDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
        var str_output = "<h1><center><img src=\"/images/a" + fullDate +".png\"></center></h1><br/><br>";
        $('#page_output').html(str_output);
    }
});
Vlad Bezden
  • 83,883
  • 25
  • 248
  • 179
1

This line looks questionable:

page_output.innerHTML = str_output;

You can use .innerHTML within jQuery, or you can use it without, but you have to address the selector semantically one way or the other:

$('#page_output').innerHTML /* for jQuery */
document.getElementByID('page_output').innerHTML /* for standard JS */

or better yet

$('#page_output').html(str_output);
dclowd9901
  • 6,756
  • 9
  • 44
  • 63
  • i changed it, but still no image after clicking date – brass Apr 01 '10 at 19:29
  • 1
    `$('#page_output').innerHTML /* for jQuery */` should be `$('#page_output')[0].innerHTML /* for jQuery */` or equivalent as `innerHTML` is not a property on a jQuery object. – Russ Cam Apr 01 '10 at 19:46
  • changed to var str_output = "

    "+ date + "

    "; $('#page_output')[0].innerHTML = str_output; just to display date if it is returning correctly, not displaying date at all     – brass Apr 01 '10 at 20:08
  • Thanks Russ. I don't mix raw JS and jQ that often, generally for this very reason. – dclowd9901 Apr 01 '10 at 20:21
0

try

$('#page_output').html(str_output);
Michael D. Irizarry
  • 6,186
  • 5
  • 30
  • 35
0

You can format the jquery date with this line:

moment($(elem).datepicker('getDate')).format("YYYY-MM-DD");

http://momentjs.com

Patrick Jaja
  • 96
  • 1
  • 3