Inline version

[thecheshirecat]

Hi.

I've downloaded the latest version of this plugin. In the demo, the inline month picker doesn't shows up. Also, I tried to add it on my site (with the latest versiones jquery and jquery-ui) and didn't appear nothing.

It's a bug?

[KidSysco]

Hi Sergi,

Thanks for the feedback! This is how we find bugs and fix them, it is when
good users like you bring stuff to our attention, so we thank you for the
open communication!

Lets start with the inline picker. If I visit the demo at...

http://jsfiddle.net/kidsysco/JeZap/show/

I can see the inline version in IE 11 CHrome and FF. JSFiddle does not
support any IE under IE 11. So let's be sure that is not what you are
running into. Let us know if you see the inline version from the link
above, if not, let us know what browser you are using.

Next, we need you to specify the exact version of jQuery. THis plugin is
not intended to work with jQuery 2.0 and up, only jQuery 1.x. Let us know
what you are using there.

Thanks,

• kid

On Wed, Dec 30, 2015 at 11:06 AM, Sergi Codina notifications@github.com
wrote:

Hi

I've downloaded the latest version of this plugin In the demo, the inline
month picker doesn't shows up Also, I tried to add it on my site (with the
latest versiones jquery and jquery-ui) and didn't appear nothing

It's a bug?

—
Reply to this email directly or view it on GitHub
#35.

[thecheshirecat]

Hi,

I was using jQuery 1.9.2 and 1.8.2, and with jQuery-UI 1.9.2. The nav I'm using is Chrome. Will try it again today, and if still doesn't works, I'll let you know, but yesterday I tried it on the demo from the ZIP file when you download it, trying to do a simple test with the latest jQuery-UI version and jQuery 1.9.2, and didn't display nothing, sometimes just the buttons without any text.

[benjamin-albert]

The repository contains a test and demo directory.

The test directory contains a test.html and test.js which run automated unit tests to help plugin developers ensure that new and existing features work as expected.

The test page is not intended for demonstration peruses (for that we have the demo on jsfiddle).

Some tests destroy the plugin to allow running multiple tests for the same feature using the same field.

This means even when you get the tests to pass you aren't going to visually see the inline menu in the test/test.html page.

The demo directory contains minified resources which are used in the demo on jsfiddle.

Please tell us more about what you've tried, for example:
Errors are you getting in the developer tools or some code you've tried that isn't doing what you expect.

If you are interested in getting the unit tests to pass or contributing code to the project see the
Month Picker Development Kit section of the projects README.md.

[thecheshirecat]

Hi and thanks for the response.

I tried to get the demo.min.js and demo.min.css but still not working.

Console is not giving any error, and the result I get is the same as the image, a set of buttons empty, just getting displayed the year.

The code is the simplest as can be: a styled div (with id="selMonth") with a Width and Height, and jquery uses $("#selMonth").MonthPicker();

Edit: I tried the same exact code (with same required files) in another empty page and it's working fine, may something is interfering with the plugin?
Yes, bootstrap.js plugin is causing the problem. Any thoughts why can it be? I need the bootstrap file, so it's not possible to eliminate it from the page.

[benjamin-albert]

As written in the installation section of the projects readme you should use the MonthPicker.min.js file.

The demo.min.js also includes the MonthPicker plugin and other plugins which are used for the demo but are not necessary in your case.

I've ran the unit tests with bootstrap included in the test/test.html page and everything is just like you are describing the buttons are empty and a lot of tests are failing.

Adding bootstraps CSS messes up the plugin a bit and adding the JavaScript breaks it completely.

@KidSysco should we support this configuration now or in the upcoming version 3.0?
The 3.0 prototype seems to handle the bootstraps CSS a bit better than the master branch,
but the JavaScript completely messes up both versions.

Image showing the plugin with bootstrap (CSS only):

Regardless of whether we support this configuration or not I will look into the details of why bootstrap.js messes up the plugin.

[benjamin-albert]

The reason that bootstrap messes up the plugin is that it overrides jQuery UI's button with it's own button.

You can workaround this by using bootstrap noConflict.

Basically add this script after the bootstrap JavaScript and before the Month Picker plugin script.

var bootstrapButton = $.fn.button.noConflict(); // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton;            // give $().bootstrapBtn the Bootstrap functionality

and replace uses of bootstrap button with:

$("#selector").bootstrapBtn( ... );

[benjamin-albert]

If you want you can tale a look and tryout the alpha (prototype) version of the upcoming version 3.0, which seems to handle the bootstrap CSS a bit better.

For details see #31.

Your feedback would be greatly appreciated.

NOTE: Version 3 is an experimental prototype that passes the existing unit tests.
If you choose to tryout version 3 please comment on issue #31 with any feedback or issues you experience.

[benjamin-albert]

@KidSysco If you think we should support the plugin with Bootstrap, I guess we can try to detect bootstrap and and do the noConflict button and maybe some CSS adjustments internally.

[KidSysco]

just getting caught up, thanks for covering for me!

I like the boot strap no conflict idea, does that work ok?

On Thu, Dec 31, 2015 at 9:38 AM, Benjamin Albert notifications@github.com
wrote:

@KidSysco https://github.com/KidSysco If you think we should support
the plugin with Bootstrap, I guess we can try to detect bootstrap and and
do the noConflict button and maybe some CSS adjustments internally.

—
Reply to this email directly or view it on GitHub
#35 (comment)
.

[benjamin-albert]

I've opened a pull request that makes the plugin handle Bootstrap out of the box.

I'm waiting for @KidSysco (the reop owner) to merge the change, but feel free to grab my version of MonthPicker.min.js

@thecheshirecat Judging by the image you've attached I think you forgot to add a reference to jQuery UI's CSS.

If this is the case please read the installation section of the projects README which explains how to reference jQuery UI's JavaScript and CSS.

[thecheshirecat]

@benjamin-albert I got them, didn't forgot them. I implement other jQuery UI's, just like datepicker.
Thanks for updating! Downloaded and it's working fine!

Update: just a question more: when I include the month picker, I don't know why it makes an horizontal scroll thought all the window. It appears only when I make the month picker. It could be because there is no position plugin?

[benjamin-albert]

It looks like the issue you had with Bootstrap was resolved.

@thecheshirecat If you're still having problems please open another issue which explains the steps (or configuration) required to reproduce the problem.

If you could create a fiddle that reproduces the problem it would be much easier for us to help you.

[thecheshirecat]

nope, all fine now! was my css, that haves a class name equal at the "year-title" class from the plugin, haha, well, thanks for all, and glad I could help reporting bootstrap compatibility!