无法初始化自定义的jQuery日历

Question

我正在尝试实现一个现有项目的jquery range calendar，但我无法使日历代码在我的项目中工作。

Here是日历的代码。

如果我将这个.js文件按原样放入我的项目中，我会得到一个"jQuery is not defined error"，因此代码后面会有一个如下所示的函数：

function initializeRangeCalendar($, window, undefined) {

    $.fn.rangeCalendar = function(options) {

    ...
}

然后，我以这种方式在我的一个.ashx文件中初始化该函数：string init = "var init = function() { " + "initJUI();" + "if (typeof initializeRangeCalendar == 'function' ) { initializeRangeCalendar(jQuery, window); } ;" + ....

然后，当我最终尝试在我的页面上调用日历时，我得到了一堆错误，表明日历函数和变量没有定义。

有没有人能帮我解决这个问题？

Answer 1

您似乎过度复杂化了这一点，和/或误解了包含代码和初始化日历所需的内容。

"jQuery未定义“表示您尚未将jQuery加载到页面中。该插件有几个依赖项，包括jQuery。在尝试添加或使用日历文件之前，至少需要在HTML中包含以下代码。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment-with-langs.min.js"></script>

然后引用日历的JS和CSS文件，这些文件应该已经下载到您的站点中(不需要包装它的任何东西)：

<script src="js/jquery.rangecalendar.js"></script>
<link rel="stylesheet" href="css/rangecalendar.css">

然后创建一个包含日历的元素：

<div id="demo"></div>

最后，根据你上面创建的元素初始化插件(从你的示例代码中，我不知道你是否真的这么做了)：

$(document).ready(function(){
  $("#demo").rangeCalendar();
});

您可以在http://www.jqueryscript.net/time-clock/jQuery-Plugin-For-Date-Range-Selector-Range-Calendar.html上的说明中找到所有这些内容，以及有关可用于配置日历的可能选项的更多信息。