1

我所有的日期都从后端格式化为ISO 86012014-01-01T12:45:30Z ，例如. 在整个应用程序中，我想以不同的格式显示它们......

  • 表格中的速记，例如Jan 1
  • 详细视图上更长、更明确的格式，例如Monday, January 1st.

解决方案我做了一个助手，我可以在其中传递格式。很容易。

can.mustache.registerHelper('formatDate', function(date, format) {
    return date() ? moment(date()).format(format) : '-';
});

问题现在我正在实施引导程序 datepicker，我怎样才能捕获这些要求......

  • 我模型中的日期格式为 ISO
  • can-value在模板中绑定到输入
  • 为用户和日期选择器显示格式MM/DD/YY

如果我不需要为模型中的每个日期值进行计算，则可以加分，因为它们很大并且有很多日期。

4

1 回答 1

1

不幸的是，还没有一个很好的 API。但是，您可以在视图中实现自定义格式，同时使用以下代码保持模型属性的原始状态。

can.view.attr('can-somecustom-value', function(el, data) {
  var attr = el.getAttribute('can-somecustom-value'),
  value = data.scope.computeData(attr, {
    args: []
  }).compute;

  new FormattedValue(el, {
    value: value
    //value is the only one we really care about, but
    //you could specify other arbitrary options here
    //such as "format: 'MM/DD/YYYY' to be used in your __format methods below"
  });
});

var FormattedValue = can.Control.extend({
  init: function () {
    this.set();
  },

  __format: function() {
    // return formatted version of this.options.value;
  },

  __deformat: function() {
    // return this.element[0].value sans format(keeps your model pristine);
  },

  '{value} change': 'set',
  set: function () {
    if (!this.element) {
      return;
    }

    var self = this;

    setTimeout(function() {
      self.element[0].value = self.__format();
    });
  },

  'change': function () {
    if (!this.element) {
      return;
    }

    this.options.value(this.__deformat());
  }
});

这将允许您执行以下操作：

<input can-somecustome-value="myDateProp"/>

其中“myDateProp”是某些 can.Map/can.Model/etc 上的属性。

这将导致输入显示自定义字符串格式，而 someModel.attr('myDateProp') 仍将返回 ISO 格式（这反过来意味着 ISO 格式也将保存到服务器）。

有一些关于添加过滤器/解析器以允许控制仅用于查看渲染的格式的内部讨论。

于 2014-09-12T19:36:20.327 回答