2010-04-01 16 views
16

tôi đang cố gắng lấy ngày từ việc triển khai bộ chọn ngày tháng jquery của tôi, thêm nó vào một chuỗi và hiển thị hình ảnh kết quả trong div của tôi. Một cái gì đó tuy nhiên chỉ là không làm việc. Bất cứ ai có thể kiểm tra mã và có một cái nhìn vào nó?getDate với Jquery Datepicker

Mã được giả định là lấy ngày từ bộ chọn ngày, kết hợp nó trong chuỗi có mã cần thiết để hiển thị thẻ, hình ảnh được đặt trong/hình ảnh và ở định dạng aYY-MM-DD.png, mới cho công cụ chọn ngày này và chưa thể hoàn thành công cụ này.

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

Trả lời

43

Tôi nghĩ rằng bạn sẽ muốn thêm một event handler 'onSelect' để khởi tạo của datepicker của bạn để mã của bạn được kích hoạt khi người sử dụng chọn một ngày. Hãy thử nó ra trên 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

Đã cập nhật để bao gồm cú pháp jQuery chính xác như Jeremy và dcloud được đề xuất. – AdmSteck

+0

đã làm các trick, tôi có thể hiển thị ngày được chọn, mã img của tôi là sai lầm bằng cách nào đó, dễ dàng khắc phục ngay bây giờ hơn tôi chỉ có thể hiển thị một cái gì đó. Cảm ơn sự giúp đỡ của mọi người – matt

+0

Nếu đây là câu trả lời giúp bạn khắc phục sự cố thì có lẽ bạn nên kiểm tra để người đọc trong tương lai biết. – AdmSteck

0

thử

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

tôi thay đổi nó, nhưng vẫn không có hình ảnh sau ngày – matt

1

Dòng này trông đáng ngờ:

page_output.innerHTML = str_output; 

Bạn có thể sử dụng .innerHTML trong jQuery, hoặc bạn có thể sử dụng nó mà không có, nhưng bạn phải giải quyết bộ chọn ngữ nghĩa theo cách này hay cách khác:

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

hoặc tốt hơn chưa

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

nhấn tôi thay đổi nó, nhưng vẫn không có hình ảnh sau khi nhấp vào ngày – matt

+1

'$ ('# page_output'). innerHTML/* cho jQuery * /' phải là '$ ('# page_output') [0] .innerHTML/* cho jQuery * /' hoặc tương đương với 'innerHTML' là không phải là một thuộc tính trên một đối tượng jQuery. –

+0

đã thay đổi thành var str_output = "

" + ngày + "

"; \t \t \t \t $ ('# page_output') [0] .innerHTML = str_output; chỉ để hiển thị ngày nếu trả lại chính xác, không hiển thị ngày ở tất cả – matt

0

Thay vì ngày phân tích, tháng, năm bạn có thể chỉ định định dạng ngày trực tiếp sử dụng chức năng datepicker của formatDate. Trong ví dụ của tôi, tôi đang sử dụng "yy-mm-dd", nhưng bạn có thể sử dụng bất kỳ định dạng nào mà bạn chọ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

Bạn có thể định dạng ngày jquery với dòng này:

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

http://momentjs.com