CODEWITHSUNDEEP
javascripttwitter-bootstrapbackbone.jsunderscore.jsdatetimepicker
user3607131
user3607131

Reputation: 173

Underscore and bootstrap datetimepicker

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();
}

Upvotes: 1

Views: 1030

Answers (1)

Jack
Jack

Reputation: 11003

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

Upvotes: 1

Related Questions