How do I set up a datepicker with third-party dependencies using Require JS?

The original.

In my application, I'm trying to use the Date Range Picker: I managed to make it work by installing all the scripts in the head section on the page: However, I'm not sure how to do the same with Require JS and third-party dependencies.

For example: to use on the page JQuery UI Date Picker I do the following:

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'
    }
});

Then I initialize it this way:

require(['jquery', 'jquery-ui'], function ($) {
    $(function() {
        $( "#datepicker" ).datepicker();
    });
});

However, I'm not sure how to do it correctly configure this if I have additional third-party libraries.

Specifically in my case, this is a moment.js and daterangepicker-master/jquery.comiseo.daterangepicker.js

Here is a fully working example on JSFiddle:

How do I configure this using Require JS?

Author: Дух сообщества, 2015-12-13
Source

1 answers

You should see if the word 'amd' is inside each library. For example: in the momentjs library, on line 9, you can see the following code:

typeof define === 'function' && define.amd ? define(factory) :

This means that you can include this library inside requirejs.config. But if there is no such word inside the library, then you should add this library to shim inside your config. For your case, it will be like this:

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"]
        }
    }
}

Due to the fact that daterangepicker already has jquery-ui as its own dependency:

shim:{
    "daterangepicker":{
        deps:["jquery-ui","momentjs"]
    }
}

And jquery-ui already has jquery as its dependency (10th line):

define(["jquery"], factory);

This means that you can enable only "jquery-ui" (without jquery) as a dependency for daterangepicker. The end result will be:

App.js:

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>
</html>
 1
Author: Rajab Shakirov, 2015-12-13 20:47:21