Ember Data date binding

Question

I am using ember-data and there is an inbuilt date type object. I am hooking this up to the date picker(built on Twitter bootstrap components). The issue is that I created a date attribute in the input tag to store the date object. The date object is getting store as a long string. This has to somehow get parsed into a date object and then get stored into the App.store. Where do I do this conversion. This is what I have done so far.

App.DatePicker = Ember.View.extend({
    classNames: ['ember-text-field','input-small'],
    tagName: "input",
    attributeBindings: ['data','value','format','readonly','type','size'],
    size:"16",
    type: "text",
    format:'mm/dd/yyyy',
    value:function(){
        var date = this.get('data');
        if(date)
            return date.format(this.get('format'));
        else
            return "";
    }.property('data'),
    data:null,
    didInsertElement:function(){
        this.$().datepicker({
            format:this.get(this.get('format'))
        }).on('changeDate', function(ev){
            console.log(ev.date);
            console.log(ev.target);
            ev.target.setAttribute('data',ev.date);
         });
    }
});

I am using it in the view template like this

{{view App.DatePicker dataBinding="staff.emp_edate" format="mm/dd/yyyy"}}

When the date attribute is set when the date is changed, the date attribute is getting changed which is binded to the staff.emp_edate. Unfortunately the staff.emp_edata is not getting changed.

Any pointers will be of great help.

Answer 1

Try the following:

Fiddle: http://jsfiddle.net/ppanagi/9rCBL/

App.DatePicker = Ember.View.extend({

  // ... leave the rest as is

  didInsertElement: function(){
     var self = this;

     var onChangeDate = function(ev) {
        self.set('data', ev.date);
     };
     var format = this.get('format');

     this.$().datepicker({ format: format })
         .on('changeDate', onChangeDate);
  }
});