Datepicker事件处理程序改进问题

时间:2012-11-20 20:41:20

标签: jquery html

在jQuery UI中从现有的datepicker创建“事件日历”时出现问题。

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

    <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代码。

2 个答案:

答案 0 :(得分:0)

应该做的伎俩

<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和当前用户的post值,然后查询事件数据库并将数据返回给脚本。

答案 1 :(得分:0)

这是您需要的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);
                });
            }
        });
    });