Uncaught SyntaxError: Failed to set the 'innerHTML' property on 'Element': The provided markup is invalid XML, and therefore cannot be inserted into an XML document.

[zamirkhan]

I'm trying to integrate the DatePicker into my Rails 4 application and did my best to follow the instructions, but I'm running into the JS error message in the title that I can't seem to solve. At the point of the error, JQuery is trying to set the innerHTML value to this:

<div class="bootstrap-datetimepicker-widget dropdown-menu"><div class="datepicker"><div class="datepicker-days"><table class="table-condensed"><thead><tr><th class="prev">&lsaquo;</th><th colspan="5" class="picker-switch"></th><th class="next">&rsaquo;</th></tr></thead><tbody></tbody></table></div><div class="datepicker-months"><table class="table-condensed"><thead><tr><th class="prev">&lsaquo;</th><th colspan="5" class="picker-switch"></th><th class="next">&rsaquo;</th></tr></thead><tbody><tr><td colspan="7"></td></tr></tbody></table></div><div class="datepicker-years"><table class="table-condensed"><thead><tr><th class="prev">&lsaquo;</th><th colspan="5" class="picker-switch"></th><th class="next">&rsaquo;</th></tr></thead><tbody><tr><td colspan="7"></td></tr></tbody></table></div></div></div>

According to some online XML validators, it's the ‹ that makes this invalid HTML. However, I don't really know that that's the problem. I can't seem to find any other examples of this happening to people, so that's why I'm posting this. I know this is not a bug with the datepicker, but most likely a problem with my setup. Your help is appreciated.

[Eonasdan]

please try v4 and post a jsfiddle of your problem. The contrib doc has a base v4 fiddle you can use as a starting point.

[zamirkhan]

Where is V4?

[Eonasdan]

https://github.com/Eonasdan/bootstrap-datetimepicker/tree/v4beta

[zamirkhan]

To be honest, the JSFiddle to me is more something that would prove that the datetimepicker has a bug. I'm not saying that it does. I'm saying that I'm thinking that something in my environment/setup is causing this issue - because obviously many people can get this datetimepicker to work, but I can't due to the error above. To reproduce this error in a JSFiddle, I'm guessing I would have to reproduce my whole environment. I'm just wondering if someone familiar with JS and JQuery understands what this error means. Maybe StackOverflow is a better place for me to ask. I don't expect V4 to help and I'd rather not switch to less at this point.

[Eonasdan]

you don't have to switch to less. The css is already compiled for you.

the point of the jsfiddle is to prove and provide something that is reproducible. If you can't provide a trimmed down version that can clearly be identified as an issue with the datepicker, I can't help.

also v4 has had a lot of work done to it and is a much cleaner plugin and may solve your issue simply by changing to v4.

I'll help if you can show me that it is the datepickers issue and not the rest of your code, otherwise, try SO and good luck.

[zamirkhan]

I understand what you're saying, but I'm agreeing that it is 99% likely that this is not an issue with the datepicker, but an issue with my environment. However, if someone follows the instructions on how to install the datepicker and then runs into an issue, it would be prudent to help them. The problem is I'm not proficient at javascript or jquery, so this error baffles me to some extent. I'm giving SO a shot and will report back.

I couldn't find the compile css in the V4 src directory - can you point me to it?