AngularJS的日期过滤器和moment JS在格式化年份时返回年份'1970'

3phpmpom  于 2023-08-02  发布在  Angular
关注(0)|答案(4)|浏览(145)

我有一个从服务器获取的对象,这个对象有一个属性:例如obj.year: "2017"。该属性是number。我只需要显示年份的最后两位数字。当我在HTML中格式化它时,如下所示:

{{obj.year | date : 'yy'}}

字符串
它显示:70。我尝试了各种内置的Angular Year过滤器,并尝试了moment js化功能:

function formatYear(year) {
    return moment(year).format('YY');
  }


但它仍然返回到1970年。我不明白为什么它会在今年返回,而这种情况只发生在它被格式化的时候?如果我不应用任何格式,它返回对象的正常值-2017

rjjhvcjd

rjjhvcjd1#

date过滤器的文档解释了为什么会发生这种情况。它希望您提供的值是一个Date对象、一个日期字符串或一个以毫秒为单位的数字。
以下是他们的描述:
将日期格式化为Date对象、毫秒(字符串或数字)或各种ISO 8601日期时间字符串格式(例如yyyy-MM-ddTHH:mm:ss.sssZ及其较短版本,如yyyy-MM-ddTHH:mmZ、yyyy-MM-dd或yyyyMMddTHHmmssZ)。如果在字符串输入中未指定时区,则时间被视为本地时区。
你得到1970的原因是B/c date过滤器将你的年份2017,并将其解释为自纪元或unix time以来的毫秒数。
要使date过滤器工作,您可以将year值转换为Date(或使用moment时的类似方法):

var date = new Date(obj.year, 0,1); // Jan 1

字符串

p1tboqfb

p1tboqfb2#

{{obj.year | date : 'yy'}}输出70的原因是因为您将数字2017传递给angular的date过滤器,因此执行了与new Date(2017)等效的操作,该操作返回的日期和时间与1970-01-01 00:00:00:000相差2017毫秒,或者更精确地说是1970-01-01 00:00:02:017。因此,当您使用yy字符串通过angular的date过滤器运行时,您会得到年份的最后两位数字,当然是70

要提供替代解决方案,可以使用angular的limiTo滤镜:

{{ obj.year | limitTo : 2 : 2 }}

字符串

yacmzcpb

yacmzcpb3#

正如其他答案所说,您得到的是70而不是17,因为Angular date过滤器接受:
日期对象、毫秒(字符串或数字)或各种ISO 8601 datetime字符串
所以你的输入被解释为从1 January 1970 00:00:00开始的毫秒数,基本上它相当于:

console.log(new Date(2017)); // 1970-01-01T00:00:02.017Z

字符串
使用moment的formatYear函数具有相同的逻辑,因此它给出了相同的错误结果。如果你使用矩解析指定格式(moment(String, String);而不是moment(Number);),你的输入将被视为字符串,你将获得正确的输出:

function formatYearBad(year) {
  // uses moment(Number)
  return moment(year).format('YY');
}

function formatYearOk(year) {
  // uses moment(String, String)
  return moment(year, 'YYYY').format('YY');
}

console.log( formatYearBad(2017) ); // 70
console.log( formatYearOk(2017) );  // 17
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>

的数据
要在angularjs视图中使用正确的时刻逻辑,必须使用angular-moment库。您可以使用amParse指定输入字符串的格式(在您的例子中是四位数年份),amDateFormat指定输出格式(在您的例子中是两位数年份)。这里是一个工作示例:

angular.module('MyApp',['angularMoment'])
.controller('AppCtrl', function($scope) {
  $scope.obj = {
    year: "2017"
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.1/angular-moment.min.js"></script>

<div ng-app="MyApp" ng-controller="AppCtrl">
  {{obj.year | amParse:'YYYY' | amDateFormat:'YY'}}
</div>
uqdfh47h

uqdfh47h4#

我们可以使用日期管道将epoch时间戳(表示自1970年1月1日以来的秒数)转换为人类可读的日期格式。日期管道可以在Angular模板(HTML)中用于格式化日期。

{{obj.year * 1000 | date : 'yy'}}

字符串
或者HTML

{{ getFormattedDate(obj.year)}}


角分量

import { DatePipe } from '@angular/common';

export class FileComponent {

  constructor(private datePipe: DatePipe) { }

  getFormattedDate(date : any) {
    return this.datePipe.transform(date * 1000, 'medium'); 
    }
  }
}


并将DatePipe添加到app.module.ts中的provider

相关问题