Ember Data date binding - jquery-plugins

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