Date range picker in Ember.view - ember.js

Question

I'm trying implement Date range picker to ember view.
App.DaterangepickerView = Ember.View.extend({
tagName: "input",
attributeBindings: ["start", "end"],
start: null,
end: null,
didInsertElement: function() {
var self = this;
this.$().daterangepicker(
{
format: 'YYYY-MM-DD',
startDate: '2013-01-01',
endDate: '2013-12-31'
},
function(start, end) {
console.log("Date-range-picker:");
self.set('startdate',start.format('DD-MM-YYYY'));
self.set('end',end.format('DD-MM-YYYY'));
console.log("start: " + self.get('start'));
console.log("end: " + self.get('end'));
}
)
},
});
template:
<script type="text/x-handlebars" data-template-name="daterangepicker">
{{view App.DaterangepickerView startBinding="start" endBinding="end"}}
start date: {{start}}
end date: {{end}}
</script>
controller:
App.DatatableController = Ember.ArrayController.extend({
start: "2013-08-07",
end: "2013-08-09",
});
startBinding and endBinding are probably wrong parameters of ember.view, but I don't know how to correctly write by contentBinding. Picker is shows and set a correct information to console, but I need set controller from there. Did you do something similar?

Answer 1

You need to use start intead of startdate.
Update this code from:
self.set('start',start.format('DD-MM-YYYY'));
To
self.set('startdate',start.format('DD-MM-YYYY'));
so your start binding will work.
It's a good idea to pass the current start and end dates to daterangepicker, so when you show the picker it will have the selected value:
this.$().daterangepicker(
{
startDate: this.get('start'),
endDate: this.get('end')
}
The final result is the following:
App.DaterangepickerView = Ember.View.extend({
tagName: "input",
attributeBindings: ["start", "end"],
start: null,
end: null,
format: 'YYYY-MM-DD',
didInsertElement: function() {
var self = this;
var format = this.get('format');
this.$().daterangepicker(
{
format: format,
startDate: this.get('start'),
endDate: this.get('end')
},
function(start, end) {
self.set('start',start.format(format));
self.set('end',end.format(format));
}
)
},
});
And this is a sample fiddle with this working http://jsfiddle.net/marciojunior/UTV3U/
I hope it helps