Question

我正在使用jQuery datepicker我没有得到为什么要使用新的Date来显示datepicker中的事件。我可以在手动传递日期时显示事件，但是当日期来自数据库时如何传递日期。

例如，我认为我var events =<?=events?>;包含title，id，event_date。其中event_date为2014-07-21格式，未显示。

Here是我尝试过的例子。

我有相同字段的相同表格。但我从数据库中获取事件。

以下是plunker链接，请查看您是否可以在不使用“新日期”的情况下编辑和显示活动。在events数组中我只想要{date：“2014-07-21”}这种格式的事件应该显示出来。或者请告诉我要编辑我的数据库返回的数组以显示在datepicker .Link plunker

这是我的简单html代码我已将我的数据库事件对象包含在其中，请参阅下面的代码运行和编辑。我试过你的代码没有为我工作。如果你取消注释工作事件对象数组它工作正常。但不适用于我从数据库重新调用的JSON数据。我必须在JSON数据中显示它。

<html>
<head>
    <title>cal </title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
    <style type="text/css">
    table.ui-datepicker-calendar tbody td.highlight > a {
        background: url("images/ui-bg_inset-hard_55_ffeb80_1x100.png") repeat-x scroll 50% bottom #FFEB80;
        color: blue;
        background: red;
        border: 1px solid #FFDE2E;
    }
    </style>
</head>
<body>
    <button class="cal13">Hover me</button>
    <div class="cal1" style="display:none"><div>

<script type="text/javascript">
$(document).ready(function(){
    //my original data in json format
var events =[ 
             {"Title":"my date booked", "event_date":"2014-07-11"},
             {"Title":"my date booked", "event_date":"2014-07-12"},
            ];

/* the working data
    var events = [ 
    { Title: "Five K for charity", Date: new Date("02/13/2011") }, 
    { Title: "Dinner", Date: new Date("02/25/2011") }, 
    { Title: "Meeting with manager", Date: new Date("03/01/2011") }
];     */       

$(".cal13").mouseenter(function(){
console.log("in now");
$(".cal1").show();
$(".cal1").datepicker({
    beforeShowDay: function(date) {
        var result = [true, '', null];
        var matching = $.grep(events, function(event) {
            return event.Date.valueOf() === date.valueOf();
        });

        if (matching.length) {
            result = [true, 'highlight', null];
        }
        return result;
    },
    onSelect: function(dateText) {
        var date,
            selectedDate = new Date(dateText),
            i = 0,
            event = null;

        while (i < events.length && !event) {
            date = events[i].Date;

            if (selectedDate.valueOf() === date.valueOf()) {
                event = events[i];
            }
            i++;
        }
        if (event) {
            alert(event.Title);
        }
    }
});
}).mouseleave(function(){
$(".cal1").hide();
    console.log("out now");
  });
});
</script>
</body>
</html>

Answer 1

我猜您使用php，如果是，那么您可以合并explode，array_reverse和implode来反转event_date到21-06-2014的顺序$event_date = "2014-07-21"; $pieces = explode("-", $event_date); $pieces = array_reverse($pieces); $result = implode("-", $pieces); echo $result; //you will get 21-07-2014，就像这样：

datepicker

通过这样做，我认为您可以将其分配给var events =[ {"Title":"my date booked", "event_date":"2014-07-11"}, {"Title":"my date booked", "event_date":"2014-07-12"}, ]; var dt_events = []; events.forEach(function(item){ dt_events.push({"Title": item.Title, Date: new Date(item.event_date)}); }); dt_events.forEach(function(item){ alert(item.Title + ' ' + item.Date); }); ..

<强> TESTED

{{1}}

查看此Fiddle，目前我没有足够的时间尝试使用Datepicker。不过我认为那样做..希望它有所帮助..

JQuery datepicker：Date的用途是什么：new Date（＆＃34; 07/19/2014＆＃34;）

1 个答案: