javascript - 无法初始化自定义 jQuery 日历

Question

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

Here是日历的代码。

如果我将此 .js 文件按原样放入我的项目中，则会收到“jQuery 未定义错误”，因此代码周围有一个如下所示的函数:

function initializeRangeCalendar($, window, undefined) {

    $.fn.rangeCalendar = function(options) {

    ...
}

然后我以这种方式初始化我的 .ashx 文件之一中的函数:string init = "var init = function() { "+
“initJUI();” +
“if(typeofinitializeRangeCalendar =='函数'){initializeRangeCalendar(jQuery，窗口);};” + ....

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

有人可以帮我完成这项工作吗？

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的说明中找到所有这些内容。 ，以及有关可用于配置日历的可能选项的更多信息。