2010-04-01 9 views
16

Próbuję uzyskać datę z mojej realizacji wyboru daty jquery, dodać go do ciąg i wyświetlić wynikowy obraz w moim div. Coś jednak po prostu nie działa. Czy ktoś może sprawdzić kod i rzucić na niego okiem?getDate z Jquery Datepicker

Kod powinien pobierać datę z selektora daty, łączyć go w ciąg znaków, który ma mieć niezbędny kod do wyświetlenia znacznika, obrazy znajdują się w/image oraz w formacie aYY-MM-DD.png, nowy w tym zbiorze dat i nie można go jeszcze całkowicie usunąć.

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

Odpowiedz

43

myślę, że chcesz dodać moduł obsługi zdarzeń „onSelect” do inicjalizacji swojej datepicker tak Twój kod zostanie uruchomiony, gdy użytkownik wybierze datę. Wypróbuj go na 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

Zaktualizowano, aby uwzględnić poprawną składnię jQuery, taką jak Jeremy i dcloud. – AdmSteck

+0

który zrobił lewę, mogę wyświetlić wybraną datę, mój kod img jest pomieszany jakoś, łatwo remedium teraz, niż mogę po prostu wyświetlić coś. Dzięki za pomoc dla wszystkich – matt

+0

Jeśli jest to odpowiedź, która naprawiła problem, powinieneś sprawdzić to, aby przyszli czytelnicy wiedzieli. – AdmSteck

0

spróbować

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

zmieniłem, ale nadal nie ma obrazu po kliknięciu datę – matt

1

Linia ta wygląda wątpliwa:

page_output.innerHTML = str_output; 

Można użyć .innerHTML ciągu jQuery, czy można go używać bez, ale trzeba się zająć selektycznie selektor w jeden lub w inny sposób:

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

albo jeszcze lepiej

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

zmieniłem, ale nadal nie ma obrazu po kliknięciu na datę: – matt

+1

'$ ('# page_output'). innerHTML/* dla jQuery * /' powinien być '$ ('# page_output') [0] .innerHTML/* dla jQuery * /' lub równoważny jako 'innerHTML' jest nie jest właściwością obiektu jQuery. –

+0

zmieniono na var str_output = "

" + data + "

"; \t \t \t \t $ ('# page_output') [0] .innerHTML = str_output; tylko po to, aby wyświetlić datę, jeśli powraca poprawnie, nie wyświetlając w ogóle daty. – matt

0

Zamiast analizowania dzień, miesiąc i rok można określić formaty dat bezpośrednio za pomocą formatDate funkcję DatePicker za. W moim przykładzie używam "yy-mm-dd", ale możesz użyć dowolnego formatu swojego wyboru.

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

można sformatować datę jquery z tej linii:

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

http://momentjs.com