javascript - 如何在 ng-model 中使用日期过滤器?

标签 javascript angularjs

这看起来应该很简单,但它让我望而却步。我想将我的日期字符串转换为日期对象并过滤它的显示方式。

我有一个简单的 Angular 应用和 Controller

myApp.controller('myAppCtrl', function($scope) {
   $scope.MyDate = Date("2014-09-23T15:26:49.1513672Z");
})

我从服务器返回了 JSON,我正在使用的日期是上述格式的字符串

来自关于 date filters 的 Angular 文档

  <span>{{1288323623006 | date:'medium'}}</span><br>

这有效,输出是: 2010 年 10 月 28 日晚上 8:40:23

当我尝试按如下方式在 $scope.MyDate 上使用过滤器时:

  {{MyDate | date:'medium'}}

日期未格式化但看起来像这样: 2014 年 9 月 24 日星期三 07:40:02 GMT-0700(太平洋夏令时)

最终我想将一个输入文本框绑定(bind)到这个值并像这样过滤它:

<input type="text" class="form-control" ng-model="MyDatee | date:'medium'"/>

我希望一旦我的简单版本开始工作,我就可以通过文本输入解决我的实际问题。

这是一个plunker with the above code

最佳答案

对于第一部分,使用 new Date() 代替:

$scope.MyDate = new Date("2014-09-23T15:26:49.1513672Z");

其次,您可以创建一个指令来格式化 input 中的模型(修改自 here )

标记如下:

<input type="text" class="form-control" ng-model="MyDate" formatted-date format="medium" />

指令是这样的:

angular.module('myApp').directive('formattedDate', function(dateFilter) {
  return {
    require: 'ngModel',
    scope: {
      format: "="
    },
    link: function(scope, element, attrs, ngModelController) {
      ngModelController.$parsers.push(function(data) {
        //convert data from view format to model format
        return dateFilter(data, scope.format); //converted
      });

      ngModelController.$formatters.push(function(data) {
        //convert data from model format to view format
        return dateFilter(data, scope.format); //converted
      });
    }
  }
});

查看更新 plunkr

关于javascript - 如何在 ng-model 中使用日期过滤器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26020266/

相关文章:

javascript - 无法在 'this' 函数内的函数内使用 'each' 定位 div

javascript - Parse JS ACL - Parse.User.current() 的 getPublicReadAccess 总是返回 false?

javascript - AngularJS 组复选框验证

javascript - MVC 5 DropDownList 将字符串添加到 Jquery 的值

javascript - 如何获取 String 中的 Javascript 元素值? (iPhone)

javascript - 函数和闭包可以替代 Javascript 中的类吗?

javascript - 如何在 AngularJS 中使用模板调用函数 foo ("someName")?

javascript - 如果出现错误,如何更改 http post 请求的 url

javascript - Ajax 读取 JSON - 无法读取未定义的属性 'name'

javascript - Threejs 波纹板定制形状