Javascript 如何使用requirejs配置具有第三方js依赖项的日期选择器？_Javascript_Jquery_Datepicker_Requirejs

Javascript 如何使用requirejs配置具有第三方js依赖项的日期选择器？

javascript jquery requirejs

Javascript 如何使用requirejs配置具有第三方js依赖项的日期选择器？,javascript,jquery,datepicker,requirejs,Javascript,Jquery,Datepicker,Requirejs,我试图在应用程序中使用以下内容：通过将脚本放在页面的标题部分，我成功地使其工作：但是，我不确定如何使用Require JS和第三方依赖项来设置它例如：要使用JQuery UI日期选择器，我只需执行以下操作： require.config({ paths: { jquery: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery', 'jquery-ui': 'https://cdnj

我试图在应用程序中使用以下内容：通过将脚本放在页面的

标题部分，我成功地使其工作：但是，我不确定如何使用Require JS
和第三方依赖项来设置它
例如：要使用JQuery UI日期选择器
，我只需执行以下操作：
require.config({

    paths: {

        jquery: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery',
        'jquery-ui': 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui'

    }

});

然后像这样实例化：
require(['jquery', 'jquery-ui'], function ($) {

    $(function() {
        $( "#datepicker" ).datepicker();
    });

});

但是，如果有其他第三方脚本，则我不确定如何配置它：
具体地说，有moment.js
和daterangepicker master/jquery.comiseo.daterangepicker.js
依赖关系，我正在努力解决
以下是完整的：
如何使用requirejs
进行设置？
您应该查看每个库中是否有“amd”字。例如，在第9个字符串中，您可以看到：
typeof define === 'function' && define.amd ? define(factory) :

这意味着您可以将其包含在requirejs配置的路径中。但是，如果您查看库中没有这个词，那么应该在配置中使用。对于您的情况，它将：
require.config({
    paths: {

        jquery: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery',
        'jquery-ui': 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui'
        "momentjs":"//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"
        //shim
        "daterangepicker":"//tamble.github.io/jquery-ui-daterangepicker/daterangepicker-master/jquery.comiseo.daterangepicker"
    },
    shim:{
        "daterangepicker":{
            deps:["jquery-ui","momentjs"]
        }
    }
}

}))
因为daterangepicker有jquery ui作为依赖项：
shim:{
        "daterangepicker":{
            deps:["jquery-ui","momentjs"]
        }
    }

并取决于第10个字符串处的jquery：
define(["jquery"], factory);

然后，您可以仅包含作为daterangepicker的依赖项的“jquery ui”。因此，结果将是：
require.config({
    paths: {
        jquery: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery',
        'jquery-ui': 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui',
        momentjs: "//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment",
        //shim
        daterangepicker: "//tamble.github.io/jquery-ui-  daterangepicker/daterangepicker-master/jquery.comiseo.daterangepicker"
    },
    shim: {
        daterangepicker: {
            deps: ["jquery-ui", "momentjs"]
        }
    }
});

require(['jquery','daterangepicker','momentjs'], function    ($,dateRangePicker,momentjs) {
    //dateRangePicker will be undefined, but it's ok.
    window.moment = momentjs; //include momentjs in global scope because plugin wants it globally.
    $("#e2").daterangepicker({
        datepickerOptions: {
            numberOfMonths: 2
        }
    });
});

index.html：
<html>
    <head>
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css"/>
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" />
       <link rel="stylesheet" href="//tamble.github.io/jquery-ui-daterangepicker/daterangepicker-master/jquery.comiseo.daterangepicker.css" />
    </head>
<body>
    <script data-main="app.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js">  </script>
    <input id="e2"></input>
</body>




我对它进行了测试，它工作正常：
我能很好地理解你的英语，非常感谢你花时间帮助我理解这一点：我仍然有问题。现在，当页面加载时，文本框只会缩回，ui
将丢失。当我点击这个小点时，日历是如何打开和关闭的。但是整个UI都消失了。您是否在文档中包含：jquery-UI.min.css、bootstrap.css、jquery.comiseo.daterangepicker.css？是的，上面发布的JSiffle中包含的所有文件。我发现“window.moment=undefined；”是个坏主意，因为插件停止工作属性，所以删除这个字符串。这有帮助吗？还是一样的问题。文本框先拉伸，然后缩回成一小行。