bootstrap-datepicker not getting shimmed with requ

Question

I am building a application with backbone.js + require.js. I want to use datepicker from here in my application: datepicker

Since its non-AMD, i shim it in requirejs like this:

require.config({
baseUrl: "appjs",

paths:{
    jquery: '../layout_assets/assets/js/libs/jquery-1.8.2.min',
    dt: '../layout_assets/plugins/datatables/jquery.dataTables.min',
    dtPlugins:'../layout_assets/plugins/datatables/dtplugins',
    dtBootstrap: '../layout_assets/plugins/datatables/dataTables.bootstrap',
    underscore: '../assets/js/underscore-min',
    Backbone: '../assets/js/backbone-min',
    bootstrap: '../assets/js/bootstrap.min',
    datepicker:'../layout_assets/bootstrap-datepicker'
    },

    shim: {
        underscore:{
            exports:"_"
        },

        Backbone:{
            deps: ['underscore','jquery'],
            exports: "Backbone"
        },

        dt: {
        deps:['jquery'],
        exports: "dt"   
        },

        dtPlugins: {
            deps:['jquery','dt'],
            exports:"dtPlugins"
            },
        bootstrap: {
        deps:['jquery'],
        exports:"bootstrap"

        },
        dtBootstrap: {
            deps: ['dt','jquery'],
            exports: "dtBootstrap"
        },

        datepicker:{
        deps:['jquery','bootstrap'],
        exports:"datepicker"
        }

        }

});

Now in one of my views i call datepicker like this:

define(['Backbone',
        'underscore',
        'jquery',
        'datepicker',
        'models/reports',
        'dtBootstrap',
        'bootstrap',
        'text!templates/reports/dashboard.html',
        ],function(Backbone,_,$,dp,report,dtBootstrap,bootstrap,dashboard){


        var view=Backbone.View.extend({
            el:"#content-wrap",
            template:_.template(dashboard),
            render:function(){
            this.$("#container-left").html(this.template());
            console.log(dp);
            }

    });
    return view;
    });

This returns undefined on the console. I guess the library is not getting shimmed properly.

Answer 1

Looking at datepicker's source it looks like it doesn't in fact export anything - that's why requirejs can't find the global dt variable to "connect" to (window.dt if run in browser environment). According to datepicker's website, it just adds its function to jQuery object, it's not supposed to be used as a standalone instance. Example from its docs page:

$('#dp5').datepicker()
  .on('changeDate', function(ev){
    if (ev.date.valueOf() < startDate.valueOf()){
      ....
    }

});

Have you tried something like that?

I believe shimming is not necessary in this case.

Answer 2

This is the shim that I use:

"datepicker" : {
    deps: ["jquery-ui", "bootstrap"],
    exports: "$.fn.datepicker"
}

for

"datepicker": "lib/datepicker/js/bootstrap-datepicker"