Bootstrap datepicker change

#1

Is it possible to monitor changes to the value of the bootstrap datepicker?

I believe that there is only a one way binding possible, but I could be wrong.

{{bootstrap-datepicker
  id="id-datepicker"
  value=datepickerValue
}}

In my controller:

export default Ember.Controller.extend({
  ...
  datepickerValue: function() {
     var datepickerValue = new Date(),
           month = this.get('model.month'),
           day = this.get('model.day');
      datepickerValue.setMonth(month - 1);
      datepickerValue.setDate(day);
      return datepickerValue;
  }.property('model.month', 'model.day'),
});

Any ideas how I might be able to achieve two-way binding so that if the date changes I can also update the controllers models month and day properties?

#2

I haven’t used bootstrap date picker but I assume you could use a setter on datepickerValue to set the models day and month.

#3

You got me wrong. It`s not that i want to change the value of the datepicker, but that i want to be notified of changes. Someting like this:

Ember.$(`#id-datepicker`).on(`change`, function(){});
#4

If value is a two way binding then you can use a get set computed property to get and set the model month and day based on the datepicker value. Looks like there is also a change date action .

#5

Nice catch!

Tried adding the the following actions in the controller and the route:

actions: {
    changeDate: function(value) {
        console.log('changeDate(value='+value+')');
    }
}

but nothing is triggered.

I am using ember-cli-bootstrap-datepicker v0.5.4 so what am I doing wrong?

#6

hard to say with the given info but it maybe worth checking that the action is actually thrown by breakpointing the bootstrap-datepicker code.