2010-04-01 8 views
16

J'essaie d'obtenir la date de ma mise en œuvre du sélecteur de date jquery, l'ajouter à une chaîne et afficher l'image résultante dans ma div. Quelque chose cependant ne fonctionne tout simplement pas. Quelqu'un peut-il vérifier le code et y jeter un coup d'œil?getDate avec Jquery Datepicker

Le code est censé prendre la date du sélecteur de date, le combiner dans une chaîne qui doit avoir le code nécessaire pour afficher le tag, les images sont situées dans/image et dans le format aYY-MM-DD.png, nouveau à ce sélecteur de date et ne peut pas tout à fait le descendre encore.

<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> 

Répondre

43

Je pense que vous voulez ajouter un gestionnaire d'événements « onSelect » à l'initialisation de votre datepicker si votre code se déclenche lorsque l'utilisateur sélectionne une date. Essayez sur 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); 
     } 
    }); 
}); 
+0

Mise à jour pour inclure la syntaxe jQuery correcte comme Jeremy et dcloud suggéré. – AdmSteck

+0

qui a fait l'affaire, je peux afficher la date sélectionnée, mon code img est en quelque sorte foiré, facilement remédié maintenant que je peux simplement afficher quelque chose. Merci pour l'aide de tout le monde – matt

+0

Si c'est la réponse qui vous a fixé le problème, alors vous devriez probablement le vérifier afin que les futurs lecteurs le sachent. – AdmSteck

0

essayer

$('#page_output').html(str_output); 
+0

je l'ai changé, mais toujours pas d'image après avoir cliqué sur la date – matt

1

Cette ligne semble discutable:

page_output.innerHTML = str_output; 

Vous pouvez utiliser .innerHTML au sein de jQuery, ou vous pouvez l'utiliser sans, mais vous devez répondre le sélecteur sémantiquement dans un sens ou dans l'autre:

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

ou mieux encore

$('#page_output').html(str_output); 
+0

je l'ai changé, mais toujours pas d'image après avoir cliqué sur la date – matt

+1

'$ ('# page_output'). innerHTML/* pour jQuery * /' devrait être '$ ('# page_output') [0] .innerHTML/* pour jQuery * /' ou équivalent comme 'innerHTML' pas une propriété sur un objet jQuery. –

+0

modifié en var str_output = "

" + date + "

"; \t \t \t \t $ ('# page_output') [0] .innerHTML = str_output; juste pour afficher la date si elle retourne correctement, ne pas afficher la date du tout – matt

0

lieu de jour de l'analyse syntaxique, le mois et l'année vous pouvez spécifier les formats de date directement en utilisant la fonction formatDate de datepicker. Dans mon exemple, j'utilise "yy-mm-dd", mais vous pouvez utiliser n'importe quel format de votre choix.

$("#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); 
    } 
}); 
0

Vous pouvez formater la date jquery avec cette ligne:

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

http://momentjs.com