How do you build a datepicker with side-dependent relationships using Require JS?



  • https://stackoverflow.com/questions/34244345/how-do-i-configure-a-date-picker-with-third-party-js-dependencies-using-require

    In my annex, I'm trying to use the Date Range Picker: I managed to make it work by putting all the violators in the section. head on page: But I'm not sure how to do the same with help. Require JS And a side relationship.

    For example: JQuery UI Date Picker I'm 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 initiate this in such a way as:

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

    However, I'm not sure how to do this properly if I have additional outside libraries.

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

    Here's a full-time example for https://jsfiddle.net/kyeqokno/1/ :

    How do you put this through Require JS?



  • You have to see if the word "amd" is inside every library. For example, in the library https://github.com/moment/moment/blob/develop/moment.js On the 9th line, you can see the following code:

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

    It means you can turn this library inside requirejs.config. But if there's no word inside the library, then you should add that library to shim inside your configuration. For your case, it'll be like,

    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 of the date of the foreignpicker already has jquery-ui as dependence:

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

    and jquery-ui already has jquery as his addiction (10th line):

    define(["jquery"], factory);

    That means you can turn it on. only "jquery-ui" (without jquery) as an addiction to daterangepicker. The final 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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2