0

我正在尝试将日期范围选择器实施到 ember 视图。

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 正确编写。选择器显示并为控制台设置正确的信息，但我需要从那里设置控制器。你做过类似的事情吗？

4

1 回答 1

2

您需要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/

我希望它有帮助

于 2013-09-28T19:39:01.490 回答