2010-04-01 127 views
16

我想從我的jQuery日期選擇器的實現獲取日期,將其添加到一個字符串,並在我的div顯示結果圖像。有些東西只是不起作用。任何人都可以查看代碼並查看它嗎?getDate與jquery Datepicker

該代碼應該採用日期選擇器中的日期,將其結合到一個字符串中,該字符串具有顯示標籤所需的代碼,圖像位於/ image和格式爲aYY-MM-DD.png,這個日期選擇器是新的,並且還不能完全解決它。

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

回答

43

我想你會想這樣當用戶選擇一個日期代碼被觸發到「ONSELECT」事件處理程序添加到您的日期選擇器的初始化。試試吧上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

已更新,以包含建議的正確jQuery語法,如Jeremy和dcloud。 – AdmSteck 2010-04-01 20:14:11

+0

這樣做的伎倆,我可以顯示選定的日期,我的IMG代碼搞亂了,現在很容易補救,比我只能顯示的東西。感謝大家的幫助 – matt 2010-04-01 20:27:30

+0

如果這是解決你問題的答案,那麼你應該檢查它,以便將來的讀者知道。 – AdmSteck 2010-04-06 17:03:36

0

嘗試

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

我改變了它,但還是點擊日期 – matt 2010-04-01 19:31:32

1

這行看起來可疑:

page_output.innerHTML = str_output; 

您可以在jQuery的使用.innerHTML,或者您可以使用它沒有,但你必須解決選擇語義上的一種或另一種方式:

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

或更好,但

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

之後沒有圖像,我改變了,但仍然沒有圖像在點擊日期後 – matt 2010-04-01 19:29:56

+1

'$('#page_output')。innerHTML/* for jQuery * /'應該是$('#page_output')[0] .innerHTML/* for jQuery * /'或者等同於'innerHTML'不是jQuery對象的屬性。 – 2010-04-01 19:46:04

+0

更改爲var str_output =「

」+ date +「

」; \t \t \t \t $('#page_output')[0] .innerHTML = str_output; 只是爲了顯示日期,如果它正確返回,根本不顯示日期 – matt 2010-04-01 20:08:10

0

,而不是分析日,月,年,你可以直接使用日期選擇器的功能formatDate指定日期格式。在我的例子中,我使用「yy-mm-dd」,但是你可以使用你選擇的任何格式。

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

你可以用下面這行格式化的jQuery日期:

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

http://momentjs.com