xdan / datetimepicker

jQuery Plugin Date and Time Picker
https://xdsoft.net/jqplugins/datetimepicker/
MIT License
3.49k stars 1.52k forks source link

use with Browserify #496

Open dronowar opened 7 years ago

dronowar commented 7 years ago

Please, help npm i jquery-datetimepicker --save-dev

import $ from 'jquery' import picker from 'jquery-datetimepicker'

how to use? $('#dt').datetimepicker()

console.log($, picker) function, function

console.log($('#dt').datetimepicker()) Uncaught TypeError: (0 , _jquery2.default)(...).datetimepicker is not a function

PhiLhoSoft commented 7 years ago

Why --save-dev? This marks the library as a tool, not as a project library.

Anyway, that's probably not the issue. You might want to ensure that in the browser, jQuery is loaded before this plugin.

Also issue #412 reports a similar problem. Note that AFAIK, jQuery must be defined globally.

Mmm, looking at the source, I think that instead of

} else if (typeof exports === 'object') {
    // Node/CommonJS style for Browserify
    module.exports = factory;

we should have

} else if (typeof exports === 'object') {
    // Node/CommonJS style for Browserify
    module.exports = factory(require('jquery'));

to avoid this dependency on a global jQuery. But some other plugins can break if it is not global, too... And the factory must return the datetimepicker object.

geekytime commented 7 years ago

Part of the problem is that build/jquery.datetimepicker.full.js concatenates three files that are all wrapped in the same factory function boilerplate.

So even if you try to manually invoke the factory function:

var $ = require("jquery")
var factory = require("jquery-datetimepicker")
factory($)

The factory function isn't datetimepicker it's the mousewheel helper script. And since they all use the same boilerplate, you'd need to export all three functions and manually invoke them to get it to work.

I noticed this problem when trying to run unit tests in node using JSDOM.

One potential fix would be to modularize these pieces into ES6 or CommonJS modules, and then have them require/import each other as usual. Then for global/browser-only users, a separate build could run the factory function using the global jquery.

barlowm commented 7 years ago

Yep we're seeing the same problem with this plugin and Browserify... Debating either trying to find a different module or perhaps switching to webpack to see if that works any better.