fix (#1484 fixing 't.fn.datepicker is undefined' when loading bootstr…

[jdnierth]

Q	A
Bug fix?	yes
New feature?	no
BC breaks?	no
Related tickets	mentioned #2362, #1484, #1196
License	MIT

Description

• Fixing bug 't.fn.datepicker is undefined' firing after minification.
• Fixing bug by making check for jquery as a dependency more defensive within AMD check.
• Setup within require.js with jquery exported (see project configuration further down)
• jQuery version 2.2.1
• Bootstrap Datepicker version: 1.8.0

Console.log screenshot

Project specific setup

HTML structure

 <div class="js-datepicker-container">
      <input type="text" class="form-control" id="dob" placeholder="Date Naisssance*(JJ/MM/AAAA)">
 </div>

RequireJS config excerpt

var require = {
    paths: {
        'jquery': 'Vendor/jquery-2.2.4',
        'bs-dropdown': 'Plugins/bootstrap/dropdown',
        'bs-datepicker': 'Plugins/bootstrap-datepicker/bootstrap-datepicker',
        'bs-datepicker-lang-fr': 'Plugins/bootstrap-datepicker/locales/bootstrap-datepicker.fr',
	...
    },
    shim: {
        'jquery': {exports: '$'},
        'bs-datepicker-lang-fr': [
            'jquery',
            'bs-datepicker',
        ]
    }
};

Custom module usage

define([
       	'jquery',
        'bs-datepicker-lang-fr'
    ],
    function search(
        $,
        bsDatepicker
    ) {
     
            var $datepickerContainer = $('.js-datepicker-container input');

            $datepickerContainer.datepicker({
                forceParse: false,
                format: 'dd/mm/yyyy'
            });
        
    });

[ocarreterom]

@jdnierth I think your changes are not following the UMD pattern.

[jdnierth]

Hey @ocarreterom , thanks for your comment but the UMD pattern is still in tact, the only change is to pass through variable declarations that can be different per environment. Happy to discuss if you have further feedback.

[jdnierth]

@ocarreterom I´m using this plugin in an AMD environment and it fails with the error message described in the bugs description without this line.

[ocarreterom]

Did you test this line?
The second argument of define([dependecies], callback) should be a function (a callback like factory) to get the dependencies as params, not the result of the function factory().

https://requirejs.org/docs/api.html#defdep

[jdnierth]

Hi @ocarreterom, I did within a custom application but I´ll decline this PR until I´ve made sure I rule out any other reason why I experienced this error. Thanks for your patience.

[jdnierth]

@ocarreterom sorry I can`t decline this PR nor can I give it a label. In case you have more access permissions could you please put a label "on hold" on it? Many thanks in advance.

[ocarreterom]

cc @vsn4ik

[ocarreterom]

Hi @jdnierth
Does this line not throw an error in a Node/Commonjs environment?

[jdnierth]

facepalm you are correct it should throw an error in Node.js environment since there is no window object, hence reverted this line. Thanks for the nudge @ocarreterom !

[jdnierth]

reverted this line to former factory(jQuery)

[mohamedkofta]

Q A
Bug fix? yes
New feature? no
BC breaks? no
Related tickets mentioned #2362, #1484, #1196
License MIT

Description

• Fixing bug 't.fn.datepicker is undefined' firing after minification.
• Fixing bug by making check for jquery as a dependency more defensive within AMD check.
• Setup within require.js with jquery exported (see project configuration further down)
• jQuery version 2.2.1
• Bootstrap Datepicker version: 1.8.0

Console.log screenshot

Project specific setup

HTML structure

 <div class="js-datepicker-container">
      <input type="text" class="form-control" id="dob" placeholder="Date Naisssance*(JJ/MM/AAAA)">
 </div>

RequireJS config excerpt

var require = {
    paths: {
        'jquery': 'Vendor/jquery-2.2.4',
        'bs-dropdown': 'Plugins/bootstrap/dropdown',
        'bs-datepicker': 'Plugins/bootstrap-datepicker/bootstrap-datepicker',
        'bs-datepicker-lang-fr': 'Plugins/bootstrap-datepicker/locales/bootstrap-datepicker.fr',
	...
    },
    shim: {
        'jquery': {exports: '$'},
        'bs-datepicker-lang-fr': [
            'jquery',
            'bs-datepicker',
        ]
    }
};

Custom module usage

define([
       	'jquery',
        'bs-datepicker-lang-fr'
    ],
    function search(
        $,
        bsDatepicker
    ) {
     
            var $datepickerContainer = $('.js-datepicker-container input');

            $datepickerContainer.datepicker({
                forceParse: false,
                format: 'dd/mm/yyyy'
            });
        
    });