Jquery ui datepicker 可点击事件日期

Question

我正在尝试实现一个日历小部件，它突出显示了带有可点击事件的事件日期，因此它会在 bootstrap 弹出窗口中显示一些附加信息。类似于此：http://jsfiddle.net/Zrz9t/1151/ 另一个附加要求是使用 jquery 2.1.3，因为我提供的 jsfiddle 不能使用它。

目前我只突出显示日期：

<script>
    $.datepicker.setDefaults( $.datepicker.regional[ "lt" ] );

    $(document).ready(function() {

        var eventDates = [];
        eventDates.push((new Date( '06/06/2015' )).toISOString(),
                (new Date( '06/07/2015' )).toISOString()
        );

        var cal = $('#calendar');

        var locale = document.getElementById('_locale').innerHTML;

        cal.datepicker($.datepicker.regional[locale]);
        cal.datepicker({
            beforeShowDay: function( date ) {
                return (eventDates.indexOf(date.toISOString()) > -1) ? [true, "event"] : [true, ""];
            }
        });
    });
</script>

我只是 JS/Jquery 的初学者，所以也许有人可以帮助我？

Answer 1

这应该让你开始： http://jsfiddle.net/jkdaza/gqha5vo8/7/

这是您发布的 jsFiddle 的修改版本。

基本上，您在切换到 jQuery 2.3.1 时遇到的问题是由于您必须添加兼容的 jQuery UI 版本（请参阅 jQuery UI docs 为了兼容性）。

我没有对您发布的示例进行太多更改，只是在 onSelect 函数中替换了一个 Bootstrap 弹出框触发器：

...
if (event) {
    var options = {
           content: event.Title,
           container: 'body'
    }
    $('[data-toggle="popover"]').popover('destroy')
    .popover(options).popover('show');
}
...

现在，由于 jQuery UI API，将日期 table 单元格转换为弹出窗口似乎真的很费解，因此，我设置了一个通用的选择日期（附有事件信息）时更新的弹出窗口。然而，通过一些实验，上述结果应该是可以实现的。

Jquery ui datepicker 可点击事件日期

Jquery ui datepicker clickable event dates

jquery

jquery-ui

datepicker

twitter-bootstrap