Backbone Datepicker

Combine a Backbone view with the jQuery UI Datepicker plugin

HTML

<script src="//code.jquery.com/jquery-2.1.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <h1>Backbone Datepicker</h1>
    <div id="form-container">
    </div>
    <script id="form-template" type="text/template">
        <fieldset>
            <legend><%= legend %></legend>
            <label for="datepicker">
                Date: 
                <input type="text" id="datepicker">
            </label>
        </fieldset>
        <input type="text" id="testbox">
    </script>

JavaScript

(function ($, _, Backbone) {
    var FormView = Backbone.View.extend({
        template: _.template($('#form-template').html()),
        tagName: 'form',
        initialize: function () {
            this.on('render', this.initDatepicker, this);
        },
        render: function () {
            this.$el.html(this.template(this.model.toJSON()));
            this.trigger('render');
            return this;
        },
        initDatepicker: function () {
            this.$('#datepicker').datepicker();
        }
    });
    var form = new Backbone.Model({
        legend: 'Legend'
    });
    var formView = new FormView({
        model: form
    });
    formView.render().$el.appendTo('#form-container');
}(jQuery, _, Backbone));