Ember Data Binding Date

Question

I use ember data and there is a built-in date type object. I connect this to a date picker (built on Twitter bootstrap components). The problem is that I created the date attribute in the input tag to store the date object. The date object gets the storage as a long string. This should somehow figure out the date object and then save to App.store. Where can 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 use it in a view template like this

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

When the date attribute is set when the date changes, the date attribute that is bound to staff.emp_edate changes. Unfortunately staff.emp_edata does not change.

Any pointers would be very helpful.

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); } });