Asynchronous Asynchronous - 5 months ago 99
jQuery Question

How do I configure a date picker with third party js dependencies using Require JS?

I am attempting to use the following Date Range Picker in an application:
I was able to successfully get it working by placing the scripts in the

head
section of the page: However, I am not sure how to set this up using
Require JS
, and the third party dependencies.

For example: To use a
JQuery UI Date Picker
I simply 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 instantiate like this:

require(['jquery', 'jquery-ui'], function ($) {

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

});


However, if there is an additional third party script, then I am not sure how to configure it:

Specifically, there is
moment.js
and
daterangepicker-master/jquery.comiseo.daterangepicker.js
dependencies which I am struggling with.

Here is a complete working example on JSFiddle:

How do set this up using
Require JS
?

Answer

You should see if "amd" word is inside each lib. For example in momentjs in 9th string you can see:

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

it means that you can include it in path part of requirejs config. But if you look inside the library and this word is not there then you should use shim inside your config. For your case it will:

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

});

because daterangepicker has jquery-ui as dependency:

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

and jquery-ui depends on jquery at 10th string:

define(["jquery"], factory);

then you can include only "jquery-ui" as dependency for daterangepicker. So the result will be:

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>

I did test of it and it works:

enter image description here