Выбор диапазона дат в Ember.view

Question

Я пытаюсь реализовать набор выбора диапазона даты на 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')); 
       } 
     ) 
    }, 

}); 

шаблона:

<script type="text/x-handlebars" data-template-name="daterangepicker"> 


    {{view App.DaterangepickerView startBinding="start" endBinding="end"}} 

    start date: {{start}} 
    end date: {{end}} 
</script> 

контроллер:

App.DatatableController = Ember.ArrayController.extend({ 

    start: "2013-08-07", 
    end: "2013-08-09", 
}); 

startBinding и endBinding, вероятно, неправильные параметры ember.view, но я не знаю, как правильно писать по contentBinding. Picker показывает и устанавливает правильную информацию для консоли, но мне нужно установить контроллер оттуда. Вы сделали что-то подобное?

Answer 1

Необходимо использовать start, начиная с startdate.

Обновление этот код от:

self.set('start',start.format('DD-MM-YYYY')); 

Для

self.set('startdate',start.format('DD-MM-YYYY')); 

так ваш start связывания будет работать.

Это хорошая идея, чтобы передать текущую start и end даты, чтобы daterangepicker, так что, когда вы показываете сборщик он будет иметь выбранное значение:

this.$().daterangepicker(
       { 
       startDate: this.get('start'), 
       endDate: this.get('end') 
       } 

Конечный результат заключается в следующем:

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

}); 

И это образец скрипка с этой рабочей http://jsfiddle.net/marciojunior/UTV3U/

I ч ope помогает