Question

I am trying to get bootstrap datetimepicker to work from https://github.com/Eonasdan/bootstrap-datetimepicker on my webapp. Due to the fact that I am using templates, I cant have the script tags needed to initialize the datetimepicker inside the template script tags.

         $("#datetimepicker1").datetimepicker(); //where should this go
         <script type="text/template" id="manage-todos-template">
         <div id="user-info">
         Signed in as <%= Parse.User.current().get("username") %> (<a href="#"       class="log-out">Log out</a>)
         </div>
         <br>
         <div>
         <textarea name="styled-textarea" maxlength="50" id="styled" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')">Enter promo here    </textarea>
         </div> 
         <div class="container">
         <div class="row">
         <div class='col-sm-6'>
         <div class="form-group">
         <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon"><span class="glyphicon glyphicon-calendar">     </span>
          </span>
         </div>
         </div>
         </div>
          <button href="#" class="submitPromo">Submit</button>
          </script>


  //render

  render: function() {
            $('#datetimepicker1').datetimepicker();
}
Was it helpful?

Solution

This is a common pattern where you need to initialize some third part component on top of your rendered html. What you basically need to do is first render your HTML and then call your third party component on the appropriate element. Keep in mind that if you haven't yet attached your view's element to the DOM (as is often the case when you are rendering a view) you can still traverse it's el using $el.find.

For example

 render: function () {

    var template = _.template($('#mytemplate').html());

    this.$el.html(template);
    this.$el.find('#datetimepicker1').datetimepicker();
    return this;
  }

And a link to a sjbin

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top