2010-04-01 23 views
16

estoy tratando de obtener la fecha de mi implementación del selector de fecha jquery, agregarlo a una cadena y mostrar la imagen resultante en mi div. Algo sin embargo simplemente no está funcionando. ¿Alguien puede verificar el código y echarle un vistazo?getDate con Jquery Datepicker

Se supone que el código toma la fecha del selector de fecha, la combina en una cadena que debe tener el código necesario para mostrar la etiqueta, las imágenes se ubican en/image y en el formato aYY-MM-DD.png, nuevo en este selector de fechas y todavía no puede descifrarlo.

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

Respuesta

43

creo que se desea agregar un controlador de eventos 'onSelect' a la inicialización del selector de fecha para que su código se activa cuando el usuario selecciona una fecha. Probarlo en 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

Actualizado para incluir la sintaxis jQuery correcta, como Jeremy y dcloud sugirieron. – AdmSteck

+0

que funcionó, puedo mostrar la fecha seleccionada, mi código de img está estropeado de alguna manera, se remedia fácilmente ahora de lo que puedo mostrar algo. Gracias por ayudar a todos – matt

+0

Si esta es la respuesta que te solucionó el problema, probablemente debas consultarlo para que los futuros lectores sepan. – AdmSteck

0

tratar

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

lo cambié, pero todavía no hay imagen después de la fecha – matt

1

Esta línea parece cuestionable:

page_output.innerHTML = str_output; 

Usted puede utilizar .innerHTML dentro de jQuery, o se puede utilizar sin, pero hay que tratar el selector semánticamente de una forma u otra:

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

o mejor aún

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

clic i cambiado, pero todavía no hay imagen después de hacer clic en la fecha – matt

+1

'$ ('# page_output'). innerHTML/* for jQuery * /' debe ser '$ ('# page_output') [0] .innerHTML/* para jQuery * /' o equivalente como 'innerHTML' es no es una propiedad en un objeto jQuery. –

+0

cambiado a var str_output = "

" + fecha + "

"; \t \t \t \t $ ('# page_output') [0] .innerHTML = str_output; solo para mostrar la fecha si está regresando correctamente, sin mostrar la fecha en absoluto – matt

0

En lugar de días de análisis, mes y año puede especificar los formatos de fecha directamente utilizando la función del selector de fecha formatDate. En mi ejemplo, estoy usando "yy-mm-dd", pero puede usar cualquier formato de su elección.

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

Puede dar formato a la fecha de jQuery con esta línea:

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

http://momentjs.com