Date Picker working -1

by niki4810

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://raw.github.com/documentcloud/underscore/master/underscore.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/master/backbone.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.modelbinder/0.1.3/Backbone.ModelBinder-min.js"></script>
<script src="http://addyosmani.github.com/jquery-ui-bootstrap/third-party/jQuery-UI-Date-Range-Picker/js/date.js"></script>
<script src="http://addyosmani.github.com/jquery-ui-bootstrap/third-party/jQuery-UI-Date-Range-Picker/js/daterangepicker.jQuery.js"></script>
<link rel="stylesheet" href="http://addyosmani.github.com/jquery-ui-bootstrap/third-party/jQuery-UI-Date-Range-Picker/css/ui.daterangepicker.css">
<div id="dateContainer"> 
    <input id="datePicker" name ="myDate" type="text"/>
</div>

JavaScript

$(function() {

    //step 1: create a model
    var myModel = new Backbone.Model();
    myModel.set({myDate: undefined});
    
    //step 2: create a change listner on the model, so whenever model binding happens simply log the model to the console
    myModel.bind('change', function() {
        console.log(JSON.stringify(myModel.toJSON()));
    });


    //step 3: create a date range picker backbone view
    var DatePickerView = Backbone.View.extend({
        _modelBinder: undefined,

        initialize: function() {
            //set up model binder
            this._modelBinder = new Backbone.ModelBinder();
        },

        close: function() {
            this._modelBinder.unbind();
        },

        el: '#datePicker',

        render: function() {
            this.$el.daterangepicker().trigger('change');;//datepicker();
       
            this._modelBinder.bind(myModel, $("#dateContainer"));
            return this;
        }
    });

    //step 4: create a new instace of you date range picker view  
    var myDatePicker = new DatePickerView();

    //step 5: render your date range picker and append it to its parent container        
    $('#dateContainer').append(myDatePicker.render().$el);



});