How can I get twitter bootstrap datepicker to work with Meteor?

Question

I would rather use the implementation of the Meteor Bootstrap package rather than the version with fewer files, but I get damn time to work with datepicker.

There seem to be three versions in different states with the latter, which Aymkdn is compiling and ready to go.

http://www.eyecon.ro/bootstrap-datepicker/

https://github.com/eternicode/bootstrap-datepicker/

https://github.com/Aymkdn/Datepicker-for-Bootstrap

The version of Aymkdn works fine in regular vanilla html, but is not served from Meteor, and I have helluva time figuring out why.

I would like to use one of Aymkdn with Meteor, but I cannot get it to work. I think this could be due either to the order of loading js in Meteor, or to the rendering of the DOM. Any insight on how I can make this work?

Thanks Steeve

Answer 1

Perhaps this approach was not available when this question was originally submitted, but I initialize the datupixer when its template is rendered.

Template.templateName.rendered = function() { $('#datepicker').datepicker(); } 

Here is a link to the event: http://docs.meteor.com/#template_rendered

With this approach, I do not support the session property or handle focus events. Prashant's solution did not work for me when the template was unloaded and returned because the session property worked. I also had a problem where the datapicker did not appear on the first focus.

Yes, the datapicker will be initialized each time the template is rendered, but I think that everything is in order, since I am sure that the template resources are cleared when navigating between them.

Answer 2

To make the datepicker function work, this is what I did,

 // At the beginning of the script Session.set("datepicker_unset", 1); Template.template_name.events = { 'focus #date-id' : function(event) { if (Session.get("datepicker_unset")) { $(event.target).datepicker(); Session.set("datepicker_unset", 0); } // Anything else on #date-id focus? }, // Any other events here } 

I assume that you are using the $(document).ready() approach. Me too, and since this did not work for me, I thought it would be a better solution.

Hope this works for you too!