如何根据DatePicker选择从Mysql中检索数据？

发布于 2024-12-05 16:28:37 字数 1329 浏览 1 评论 0原文

我有一个页面，其中显示了带有一些突出显示的日期的 jquery 日期选择器。如何检索数据并根据在日期选择器中单击的日期填充 div。到目前为止，这是我的代码：

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

原文

I have a page where I am showing a jquery datepicker with some highlighted dates. How do I retrieve data and populate a div based on a date clicked in the date picker. Here is my code so far:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

大海や 2024-12-12 16:28:37

您需要对服务器端脚本（php或asp.net或您选择的任何服务器端语言/框架）进行ajax调用

好吧，在看到您希望代码在选择日期时发生后，编辑，我对 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"
    } ]
}

well, you will need to do an ajax call to a serverside script (php or asp.net or any serverside language/framework of your choosing)

edit after seeing you want the code to happen on selecting a date, i changed the javascript a little end edit

like this:

//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);
      });
    });
  }
});

this would however require you to have your getdata.php return proper json like this:

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

回复收藏 0 原文

~没有更多了~