jquery - Datepicker 事件处理程序改进问题

Question

从 jQuery UI 中的现有日期选择器制作我的“事件日历”时遇到问题。

这是我到目前为止提出的代码。

    <script>
    $(document).ready(function() {
        $("#datepicker").datepicker({
            onSelect: function(dateText, inst) {
                var myDate = new Date(dateText);
                var newFormat = $.datepicker.formatDate("yy-mm-dd", myDate);
                    if (newFormat === "2012-11-20") {
                        $("#div").html("KIING");
                    } else if (newFormat === "2012-11-21") {
                        $("#div").html("KIIIIIIING");
                    } else if (newFormat === "2012-11-03") {
                        $("#div").html("1234123");
                    } else {
                        $("#div").html("");
                    }
            }
        });
    });
</script>
<div id="datepicker"></div>
<div id="div"></div>

http://jsfiddle.net/ALrkB/

我被困在这里，我不知道如何使代码更好，这样您就不必为每个事件手动插入代码。

想法是用户登录到 CMS 并添加一个带有 DATE 和 EVENT 的查询，然后它连接到 jQuery 代码。

Answer 1

这应该够了吧

<script>
   $(document).ready(function() {
    $("#datepicker").datepicker({
        onSelect: function(dateText, inst) {
            var ajaxCfg = {
                url: '/your/path/to/data',
                data: {selectedDate: dateText},
                type: 'POST',
                success: function(data) {
                  $("#div").html($(data).html());
                }
            };
            $.ajax(ajaxCfg);
        }
    });
});
</script>
<div id="datepicker"></div>
<div id="div"></div>

在服务器端，您需要获取 selectedDate 和当前用户的发布值，然后查询您的事件数据库并将数据返回到脚本。

Answer 2

这是您需要的 jQuery 代码：

$(document).ready(function() {
        $("#datepicker").datepicker({
            onSelect: function(dateText, inst) {
                var myDate = new Date(dateText);
                var newFormat = $.datepicker.formatDate("yy-mm-dd", myDate);
                $.getJSON("callookup.php", { date: newFormat }, function(result) {
                        $("#div").html(result);
                });
            }
        });
    });