按日期返回的角度過濾器mm-dd-yyyy

Question

我在控制器中運行過濾器，但無法正確過濾日期。

理想情況下，我想要這個Thu Mar 31 2016 05:05:00 GMT-0400 (EDT) 。

但是，當我運行代碼時， results等於03-31-2016 。

我在控制器中的代碼

$scope.date = "2016-03-31T05:05:00Z";

var results = $filter('date')($scope.date, "EEE MMM DD YYYY HH:mm:ss GMT Z (EDT)");

有什么問題，我該如何解決？ Angular版本1.2.26 。

Answer 1

下面通過過濾器，或者使用momentjs進行演示，以實現更好的時區和格式控制。

請注意，angularjs過濾器僅限於使用瀏覽器的時區運行。

還要注意，我直接在其中插入了momentjs（帶有時區支持），但是那里有一些不同的包裝器，可以更“角度化”的方式將其作為服務和/或指令提供。

 (function() { "use strict"; angular.module("app", []) .controller("ctrl1", ["$scope", "$filter", CtrlOne]) .controller("ctrl2", ["$scope", "$filter", "$window", CtrlTwo]); function CtrlOne($scope, $filter) { // See 'Timezones' at bottom of: https://code.angularjs.org/1.2.26/docs/guide/i18n // Basically, using filter will always use the timezone of the browser, so hard- // coding '(EDT)' will be incorrect for anyone not in your timezone. $scope.date = "2016-03-31T05:05:00Z"; //Note that 'Z' means UTC 0 $scope.results = $filter('date')($scope.date, "EEE MMM dd yyyy HH:mm:ss 'GMT'Z '(EDT)'"); } function CtrlTwo($scope, $filter, $window) { // MomentJS with timezones allows you to specify timezones, and provides more formatting options. // Also, note that the date string being formatted below uses -04:00 instead of Z to indicate its timezone. // See: http://en.wikipedia.org/wiki/ISO_8601#Time_zone_designators var moment = $window.moment; $scope.results = moment.tz("2016-03-31T05:05:00-04:00", "America/New_York").format("ddd MMM DD YYYY HH:mm:ss [GMT]Z [(]z[)]"); } })(); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script> <script src="http://momentjs.com/downloads/moment-timezone-with-data-2010-2020.min.js"></script> <div ng-app="app"> <div ng-controller="ctrl1"><strong>angular filter</strong>, will only be correct for browsers in EDT:<br />{{results}}</div> <br /> <div ng-controller="ctrl2"><strong>momentjs</strong> allowing some timezone control and better formatting:<br />{{results}}</div> </div> 

Answer 2

您的篩選器不正確。 用這個

 angular.module("app", []).controller("ctrl", ["$scope", "$filter", function ($scope, $filter) { $scope.date = "2016-03-31T05:05:00Z"; $scope.results = $filter('date')($scope.date, "yyyy-MM-ddTHH:mm:ss.sssZ"); }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app"> <div ng-controller="ctrl">{{results}}</div> </div> 

Answer 3

嘗試這個..

    <div ng-app="sampleapp">
<div ng-controller="samplecontoller" ng-init="init();">
    <div ng-repeat="date in dates" class="dateformatter">

<span><strong>Date</strong> : {{ date.date1 }}</span>
<span><strong>Date Format</strong> : {{ date.date1 | dateFormat }}</span>
<span><strong>Date Format</strong> : {{ date.date1 | dateFormat1 }}</span>
<span><strong>Time Format</strong> : {{ date.date1 | time }}</span>
<span><strong>Date time Format</strong> : {{ date.date1 | datetime }}</span>
<span><strong>Date time Format</strong> : {{ date.date1 | datetime1 }}</span>

    </div>
    </div>
</div>

var myapp = angular.module('sampleapp', [ ]);

myapp.controller('samplecontoller', function ($scope ,$interval ) {

    $scope.init = $interval(function(){

    var date = new Date();
    $scope.dates = [{ "date1" : date }]

     },100 )

});
myapp.filter('dateFormat', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 

  var _date = $filter('date')(new Date(input), 'MMM dd yyyy');

  return _date.toUpperCase();

 };
});
myapp.filter('dateFormat1', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 

  var _date = $filter('date')(new Date(input), 'MM dd yyyy');

  return _date.toUpperCase();

 };
});

myapp.filter('time', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 

  var _date = $filter('date')(new Date(input), 'HH:mm:ss');

  return _date.toUpperCase();

 };
});
myapp.filter('datetime', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 

  var _date = $filter('date')(new Date(input),
                              'MMM dd yyyy - HH:mm:ss');

  return _date.toUpperCase();

 };
});
myapp.filter('datetime1', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 

  var _date = $filter('date')(new Date(input),
                              'MM dd yyyy - HH:mm:ss');

  return _date.toUpperCase();

 };
});

演示： http : //jsfiddle.net/prash/Cp73s/323/light/參考： http : //angulartutorial.blogspot.in/2014/04/date-filtering-and-formatting-in.html

Answer 4

問題出在您的參數“ EEE MMM DD YYYY HH：mm：ss”

更改為
“ EEE MMM dd yyyy HH：mm：ss”

請參閱角度文檔 。

Answer 5

我不確定您會如何獲得03-31-2016 。 但是看起來您的過濾器已經很接近了。 DD應該是dd 。 YYYY應該是yyyy 。 GMT的M需要用單引號引起來。 另外，您似乎沒有指定時區。 您應該在Z后面指定一個時區或刪除Z

var result = $filter('date')("2016-03-31T05:05:00", "EEE MMM dd yyyy HH:mm:ss G'M'TZ (EDT)", "");
console.log(result);

---

Thu Mar 31 2016 05:05:00 GMT-0400 (EDT)

JS小提琴

Answer 6

我已經用下面的代碼進行了測試。 我想這就是你想要的。

.js代碼：

 var result = $filter('date')('2016-03-31T05:05:00Z', 'EEE MMM dd yyyy HH:mm:ss GMT Z (EDT)');
    console.log(result);

html的

{{dtEmp | date: 'EEE MMM dd yyyy HH:mm:ss GMT Z (EDT)' }}

請清理瀏覽器的緩存。

結果

2016年3月31日星期四16:35:00 AD3T +1100（EDT）