angularjs - 在 angular 中使用 moment js 来格式化时间

Question

我无法让 Angular 中的 Moment 像我想要的那样格式化我的时间。我在这里工作的日期过滤器:

<h4>{{event.date | amDateFormat:'MMMM Do'}}</h4>

但是当我尝试使用这种格式打印时间时，我的时间完全从浏览器中消失了。这是我正在输入的内容:

<div class="row">
           {{event.time | amDateFormat: 'h:mm a'}}
         </div>

如果这很重要，我正在使用 Firebase。此外，获取时间的输入是 HTML5 input type=time 属性。

Answer 1

当您将 type=time 用于输入时，该值将存储为仅表示时间的字符串，例如“1:00”或“13:00”。 amDateFormat 过滤器需要一个可以解释为日期的值，该日期可以是 Date 对象、时间戳的数字值或格式正确的字符串日期。您将使用 type=time 获得的时间值不是有效的日期字符串，因此 amDateFormat 无法正确解析该值。

使其工作的最简单方法是在使用 event.date 过滤器之前连接 event.time 和 amDateFormat 的值:

<div class="row">
  {{event.date + ' ' + event.time | amDateFormat: 'h:mm a'}}
</div>

更好的解决方案是使用一个函数，您可以在其中传递日期和时间，或者只是时间并构造可以解释为日期或日期对象的东西。

<div class="row">
  {{ combine(event.date,event.time) | amDateFormat: 'h:mm a'}}
</div>

简单的组合功能

  $scope.combine = function(date,time) {
    if (date && time) {
      return date + ' ' + time;
    } else {
      return "";
    }
  };

我仍然认为必须在这样的时间中添加日期有点麻烦，但它有效，您甚至可能最终在您的数据模型中将它们连接在一起。我认为最好的解决方案是只拥有一个 event.dateAndTime 对象，您可以使用它来表示日期和时间——并且您可以使用 type=datetime-local html5 类型来实现这一点(至少在 Chrome 中它对我有用)。

<dir>Date and time: <input type="datetime-local" ng-model="event.datetime"></dir>
<h4>{{event.datetime | amDateFormat:'MMMM Do'}}</h4>
<div class="row">
  event.datetime time: {{ event.datetime | amDateFormat: 'h:mm a'}}
</div>

这是一个工作plunker: http://plnkr.co/edit/OERKK9ilxFwUlKLKirtl?p=preview