ember.js - emberjs 模板中的日期条目

Question

当我在 emberjs 的车把模板中设置 {{input value=sDate type='date'}} 时，我在使用 Chrome 时得到了 html5 日期选择器。不幸的是，Firefox 不支持 html5 日期选择器。如何改为切换到 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");
  }
});

date-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}}