emberjs模板中的日期条目

Question

当我在emberjs的把手模板中设置{{input value = sDate type ='date'}}时，我在使用Chrome时会获得html5 datepicker。不幸的是，Firefox不支持html5 datepicker。我该如何切换到jqueryUI datepicker？

Answer 1

最好的方法是创建自己的组件，并在组件的element.datepicker();挂钩中调用didInsertElement。

Answer 2

以下是Bootstrap DatePicker的[Ember.Component][1]实施：

注意：您应该能够轻松调整setupDatePicker函数以使用jqueryUI datepicker。

date_picker_component.js

Chipmunk.DatePickerComponent = Ember.Component.extend({
  setupDatePicker: {
    var self = this;
    return this.$('.datepicker').datepicker({
      separator: "-",
      autoclose: true
    }).on("changeDate", function(event) {
      return self.set("value", self.format(event.date));
    });
  }.on('didInsertElement'),

  formattedValue: {
    var value = this.get('value');
    if (value) {
      return this.format(value);
    }
  }.property('value'),

  format: function(value) {
    return moment.utc(value).format("YYYY-MM-DD");
  }
});

日期picker.handlebars

<div class="date datepicker" data-date-format="yyyy-mm-dd">
  <input class="form-control" size="16" type="text" readonly {{bindAttr value="formattedValue" rel="rel"}}>
  <span class="add-on"><i class="icon-th"></i></span>
</div>

用法：

{{date-picker value=sDate}}