Search code examples
formsexpressionenginebootstrap-datetimepicker

Issue with Bootstrap datetimepicker and ExpressionEngine channel form template tag


I am having a problem with a Bootstrap datetimepicker (this one: https://github.com/Eonasdan/bootstrap-datetimepicker) when placed within a form on my site that uses the {exp:channel:form} tag to commit the data upon submission.

The datetimepicker doesn't fire; at first I thought it was just a CSS issue that meant it wasn't visible but after extensive testing I've discovered that the datetimepicker works just fine with ALL of my HTML and CSS on the page, it's only when I wrap my form fields in the {exp:channel:form} template tag that it stops working.

Viewing the source that this template tag outputs, I have further narrowed down the code that causes the datetimepicker to stop working to this:

<script type="text/javascript" charset="utf-8" src="http://differentsnow.com/index.php?ACT=11&ui=core,widget,mouse,position,draggable,resizable,button,dialog,datepicker&plugin=markitup,toolbox.expose,overlay,tmpl&file=underscore,cp/date&v=1387560768&use_live_url=y&include_jquery=y"></script>

Removing this script causes the datetimepicker to work again.

I still need to include the {exp:channel:form} tag so that my form works properly but would also like the datetimepicker to work. Has anyone seen the same issue? Can anyone advise what I can do within EE to amend this script, or what it actually does?

I am using:

  • ExpressionEngine 2.7.3
  • bootstrap.js (v3.1.1 as the more recent v3.2.0 causes the datetimepicker to stop working)
  • bootstrap-datetimepicker.js (v.3.1.3)
  • moment.js (v2.8.1)

I am aware that the ordering of these scripts is important and, as I say, without the offending script above that is output by the {exp:channel:form} tag, the datetimepicker works 100%!

Many thanks, Rob


Solution

  • Are you using the include_jquery="no" parameter? By default, {exp:channel:form} will include jQuery, you have to disable it. See documentation here.