如何根據DatePicker選擇從Mysql檢索數據？

我有一個頁面，我顯示一個jQuery日期選擇器與一些突出顯示的日期。如何根據日期選擇器中單擊的日期檢索數據並填充div。這是我到目前爲止的代碼：如何根據DatePicker選擇從Mysql檢索數據？

<!DOCTYPE html> 
<html> 
<head> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 


<script type="text/javascript"> 

var dates = [new Date(2011, 9-1, 20), new Date(2011, 9-1, 21),new Date(2011, 10-1, 1)]; 

$(function(){ 

    $('#datepicker').datepicker({ 
     numberOfMonths: [1,1], 
     dateFormat: 'dd/mm/yy', 
     beforeShowDay: highlightDays 
    }); 

    function highlightDays(date) { 
     for (var i = 0; i < dates.length; i++) { 
      if (dates[i].getTime() == date.getTime()) { 
       return [true, 'highlight']; 
      } 
     } 
     return [true, '']; 
    } 

}); 
</script> 

<style> 

#highlight, .highlight { 
    background-color: #cc0000; 
} 

</style> 


</head> 
<body style="font-size:62.5%;"> 

<div id="datepicker"></div> 

<div id="events"> 
Data From Mysql To Go Here 
</div> 
</body> 
</html>

來源

2011-09-20 user875293

好了，你需要做一個AJAX調用服務器端的一個腳本（PHP或asp.net或您選擇的任何服務器端語言/框架）

編輯後看到你想要的代碼在選擇日期發生，我改變了JavaScript的一個小末編輯

這樣的：

//add the onSelect function to your date picker, and put the code to fetch your events in there 
$('#datepicker').datepicker({ 
    numberOfMonths: [1,1], 
    dateFormat: 'dd/mm/yy', 
    beforeShowDay: highlightDays, 
    onSelect: function(date){ 
    // put your selected date into the data object 
    var data = {'date': date}; 

    // do the ajax call to the serverside script and pass 'data' to it. 
    $.get("serverurl/data/getdata.php", data, function(data){ 
     // this function is called upon successfully completing the ajax call 
     //do your magic here to put the data elements into your div, see below for an example 
     data.Events.each(function(d){ 
     var e = $('<div/>').text(d.Title); 
     $('#events').append(e); 
     }); 
    }); 
    } 
});

但這會要求你有你的訪問getdata.php回到這樣正確的JSON：

{ 
    Events: [ { 
     Title: "event 1", 
     Description: "event description" 
    }, 
    { 
     Title: "event 2", 
     Description: "event description" 
    } ] 
}

來源

2011-09-20 15:14:08 Sander

丟在這裏我有點＃鍵？點擊日期選擇器中的日期時會自動給出按鈕的ID？ – user875293

我改變了代碼，我以爲你會有一個按鈕，但你想要它在選擇日期後立即，所以我用的選擇事件的日期選擇器 – Sander

我已經想通了，但我不能發佈我的工作了6幾個小時這樣生病試着發佈我明天工作和想要的東西。謝謝你的幫助 – user875293

如何根據DatePicker選擇從Mysql檢索數據？

回答

相關問題