Button not being populated

[LimeBlast]

I'm not sure what I'm doing wrong, but after adding your plugin to my site, I can see that the code is triggering, and the input box is being hidden, and replaced by a button, but the button is tiny and empty.

Clicking on the button makes the date range selector appear, so I know at least that part of it is working.

Looking at the generated buttons on your example site, I can see that the generated button HTML looks something like this:

<button aria-disabled="false" role="button" id="drp_autogen0" class="comiseo-daterangepicker-triggerbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-secondary comiseo-daterangepicker-bottom" type="button">
  <span class="ui-button-text">Select date range...</span>
  <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
</button>

But the button html being generated on my site is:

<button type="button" class="comiseo-daterangepicker-triggerbutton comiseo-daterangepicker-bottom" id="drp_autogen0">
</button>

notice no span tags.

Any idea what I'm doing wrong? Thank you.

PS, I don't know if this is related, but when I first installed it, it failed to trigger complaining that .moment wasn't defined, but I fixed this by including http://momentjs.com/

[op16]

I'm not sure either. Check that you have included all dependencies, like in the first example. If you use additional JS code, that may be a cause for conflict. Try temporarily disabling those and see if it works. I remember some issues when I first tried to use it together with Bootstrap (solved by changing include order).

PS. The example needs to be fixed to include moment.js before the main script.

[LimeBlast]

That seems to have fixed it. I've moved jQuery UI to be included after bootstrap (god I hate bootstrap) and it's working now.

Thank you.

[abekauffman]

I am experiencing this same issue. I've followed the advice here, ensured JQuery UI is included after bootstrap and still not expanding. Otherwise the tool works fine and am eager to use it. Just missing those spans to display the modified text values.

Here is the order of my scripts:

bootstrap.css bootstrap-responsive.css yiistrap.css jquery-ui.min.css jquery.comiseo.daterangepicker.css jquery.js jquery-ui.min.js moment.min.js jquery.comiseo.daterangepicker.min.js

And their versions:

Bootstrap: 2.3.2 JQuery: 1.11.4 JQuery-UI: 1.11.4 Moment: 2.9.0

Thanks and hope I can get this working. It appears to be an excellent resource.

Edit: I will follow your other advise and try disabling other scripts that may conflict with yours. If I nail down the particular issue, I'll post the results here for everyone's benefit.

[op16]

The documentation page is using Bootstrap: 3.1 and jQueryUI 1.10. Our widget was never tested with Bootstrap v2, which is even less forgiving with third-party JavaScript libraries like jQuery UI...

So, check the documentation for your version of Bootstrap.

For v3, this is needed after Bootstrap, and jQueryUI is included first:

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

If you can make it work, please document it here.

[abekauffman]

Thank you for the quick response. I had also tested with a temporary upgrade to bootstrap 3.3.2 but hadn't tried this suggestion, so it still didn't work. I'll try this method now and post the result here.

Even if this does not resolve it, I'm determined to make this work because this custom date range picker is exactly what I'm looking for. Whatever I find as the issue and solution will be shared here.

[saraf]

Problem still exists with:

bootstrap 3.3.6 jquery 1.12.2 jquery ui 1.11.4

Loading jquery-ui.js after bootstrap.js fixes the problem for me.

[peterantoniou]

The problem is the call to the jqueryui button widget since bootstrap overwrites it. It can be fixed by either rewriting those to not rely on that code, or copying the widget source and changing the name.