CODEWITHSUNDEEP
javascriptjqueryeventsbackbone.jsdatepicker
natecraft1
natecraft1

Reputation: 2836

Backbone.js datepicker event listener without a model

I am new to backbone and I'm trying to create a datepicker. I am trying to add an event listener without a model but the click event listener i added in the view is acting funny so I assume I'm going about this wrong. The code I'm trying to emulate (which works) is as follows: 

initialize:function () {
    ...
    this.model.bind('change', this.pageSetup, this);
    ...
}

  pageSetup:function () {

    var self = this;

      $("#date-range").datepicker({
        onSelect:function (dateText, datePickeOBJ) {
          self.selectedDate = dateText;
          self.onDateChange(datePickeOBJ);
        },
        defaultDate: this.selectedDate,
        maxDate:'-2'
      });
    ...
 }

which seems to work fine. In my case there is no model. Right now I have

return BaseView.extend({
  el: "<div id='main-inner'>",

  template: "print-report",
  events: {
      "change #date-range": "datePicker"
  }, ...
datePicker: function() {
 var self = this;

$("#date-range").datepicker({
        onSelect:function (dateText, datePickeOBJ) {
          self.selectedDate = dateText;
          self.onDateChange(datePickeOBJ);
        },
        defaultDate: this.selectedDate,
        maxDate:'-2'
      });
 }, ...

How could I better go about this is good backbone fashion?

Upvotes: 2

Views: 3507

Answers (1)

fbynite
fbynite

Reputation: 2661

I just create the $.datepicker() on mouseover.

events: {
  'mouseover #dateinput' : 'createDatePicker'
},

createDatePicker:function(e) {
  var view = this;

  $(e.currentTarget).datepicker({
    maxDate:'-2',
    defaultDate:view.selectedDate,
    onSelect:function(dateText,datePicker) {
      console.log('onSelect',dateText);
      view.selectedDate = dateText;
      view.onDateChange(datePicker);
    }
  });
}

Here is a demo

Upvotes: 3

Related Questions