2010-04-01 16 views
16

Sto provando ad ottenere la data dalla mia implementazione del selettore di date jquery, aggiungerlo a una stringa e visualizzare l'immagine risultante nel mio div. Qualcosa però non funziona. Qualcuno può controllare il codice e dare un'occhiata a questo?getDate con Jquery Datepicker

Il codice deve prendere la data dal selettore data, combinarlo in una stringa che deve avere il codice necessario per visualizzare il tag, le immagini si trovano in/image e nel formato aYY-MM-DD.png, nuovo a questo raccoglitore di date e non riesco ancora ad abbassarlo.

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

risposta

43

Penso che si vorrebbe aggiungere un gestore di eventi 'onSelect' per l'inizializzazione del vostro datepicker modo che il codice viene attivato quando l'utente seleziona una data. Provalo sul 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

Aggiornato per includere la sintassi jQuery corretta, come suggerito da Jeremy e dcloud. – AdmSteck

+0

che ha fatto il trucco, posso visualizzare la data selezionata, il mio codice img è incasinato in qualche modo, facilmente rimediabile ora di quanto riesca a mostrare qualcosa. Grazie per l'aiuto di tutti – matt

+0

Se questa è la risposta che ha risolto il problema, probabilmente dovresti controllarlo in modo che i futuri lettori lo sappiano. – AdmSteck

0

provare

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

ho cambiato, ma ancora nessuna immagine dopo aver fatto clic data – matt

1

Questa linea appare discutibile:

page_output.innerHTML = str_output; 

È possibile utilizzare .innerHTML all'interno di jQuery, oppure è possibile utilizzare senza, ma si deve affrontare il selettore semanticamente in un modo o nell'altro:

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

o meglio ancora

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

ho cambiato, ma ancora nessuna immagine dopo aver cliccato sulla data – matt

+1

'$ ('# page_output'). innerHTML/* per jQuery * /' dovrebbe essere '$ ('# page_output') [0] .innerHTML/* per jQuery * /' o equivalente come 'innerHTML' è non una proprietà su un oggetto jQuery. –

+0

modificato in var str_output = "

" + date + "

"; \t \t \t \t $ ('# page_output') [0] .innerHTML = str_output; solo per visualizzare la data se sta ritornando correttamente, non visualizzando la data del tutto – matt

0

Invece di giorno parsing, mese e anno è possibile specificare i formati di data utilizzando direttamente la funzione di datepicker formatDate. Nel mio esempio sto usando "yy-mm-dd", ma puoi usare qualsiasi formato di tua scelta.

$("#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

È possibile formattare la data jquery con questa linea:

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

http://momentjs.com