ProgramingTip

UTC 날짜와 함께 AngularJS 날짜 필터 사용

bestdevel 2020. 10. 31. 09:54
반응형

UTC 날짜와 함께 AngularJS 날짜 필터 사용


Angular의 날짜 필터에 전달하는 UTC 날짜 (밀리 초)가 있습니다.

{{someDate | date:'d MMMM yyyy'}}

someDateUTC에 포함 된 날짜 필터가 현지 시간으로하고 점을 제외하면 훌륭 합니다.

Angular someDate가 UTC 임을 어떻게 알 수 있습니까?

감사합니다.


여기에 설문 질문

내 응답을 다시 게시하고 병합을 제안합니다.

출력 UTC는 약간의 혼란의 대상인 것 입니다. 사람들은 moment.js 에 끌리는 것 입니다.

답변 에서 빌리면 moment.js없이 다음과 같은 작업을 수행 할 수 있습니다 (예 : UTC 생성 날짜를 생성하는 변환 함수 사용).

제어 장치

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

app1.controller('ctrl',['$scope',function($scope){

  var toUTCDate = function(date){
    var _utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),  date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
    return _utc;
  };

  var millisToUTCDate = function(millis){
    return toUTCDate(new Date(millis));
  };

    $scope.toUTCDate = toUTCDate;
    $scope.millisToUTCDate = millisToUTCDate;

  }]);

주형

<html ng-app="app1">

  <head>
    <script data-require="angular.js@*" data-semver="1.2.12" src="http://code.angularjs.org/1.2.12/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="ctrl">
      <div>
      utc {{millisToUTCDate(1400167800) | date:'dd-M-yyyy H:mm'}}
      </div>
      <div>
      local {{1400167800 | date:'dd-M-yyyy H:mm'}}
      </div>
    </div>
  </body>

</html>

여기 에 그것을 가지고 노는 플런 커가 있습니다.

이것이것도 참조하십시오 .

또한이 방법을 사용하면 Angular의 필터에서 '사용하면 여전히 현지 날짜를 인쇄하는 것'을 사용할 수 있습니다.


AngularJS 사람들이 버전 1.3.0에서 작업하는위원회. 이해야 우리 할 당신 일은 : 'UTC'포맷 문자열 뒤 6 추가 하는을 구석으로입니다. 다음과 같은 것 :

{{someDate | date:'d MMMM yyyy' : 'UTC'}}

문서 에서 볼 수 있습니다. Plunker 예제

BTW, Z 콜백 변수에는 'UTC'로도 현지 메시지가 표시되어야한다고 생각합니다.


다음은 날짜를 사용하거나 javascript Date ()를 사용 하는 필터 입니다. Moment.js를 사용하고 인기있는 'fromNow'와 같은 모든 Moment.js 변환 기능을 적용 할 수 있습니다.

angular.module('myModule').filter('moment', function () {
  return function (input, momentFn /*, param1, param2, ...param n */) {
    var args = Array.prototype.slice.call(arguments, 2),
        momentObj = moment(input);
    return momentObj[momentFn].apply(momentObj, args);
  };
});

그래서 ...

{{ anyDateObjectOrString | moment: 'format': 'MMM DD, YYYY' }}

2014 년 11 월 11 일 표시

{{ anyDateObjectOrString | moment: 'fromNow' }}

10 분 전에 표시됩니다.

여러 모멘트 함수를 호출해야하는 경우가 있습니다. 이 UTC로 변환 한 다음 형식을 지정합니다.

{{ someDate | moment: 'utc' | moment: 'format': 'MMM DD, YYYY' }}

이에 대해 angular.js repo https://github.com/angular/angular.js/issues/6546#issuecomment-36721868 에 버그가 있습니다.


진화 된 버전의 ossek 솔루션

사용자 지정 필터가 더 적합하면 프로젝트의 어느 곳에서나 사용할 수 있습니다.

js 파일

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

myApp.filter('utcdate', ['$filter','$locale', function($filter, $locale){

    return function (input, format) {
        if (!angular.isDefined(format)) {
            format = $locale['DATETIME_FORMATS']['medium'];
        }

        var date = new Date(input);
        var d = new Date()
        var _utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),  date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
        return $filter('date')(_utc, format)
    };

 }]);

템플릿

<p>This will convert UTC time to local time<p>
<span>{{dateTimeInUTC | utcdate :'MMM d, y h:mm:ss a'}}</span>

moment.js를 사용하는 경우 moment (). utc () 함수를 사용하여 moment 객체를 UTC로 변환합니다. moment (). format () 함수를 사용하여 뷰 대신 컨트롤러 내에서 멋진 형식을 처리 할 수도 있습니다. 예를 들면 :

moment(myDate).utc().format('MM/DD/YYYY')

약간의 조사 끝에 UTC를 현지 시간으로 변환하는 좋은 솔루션을 찾을 수 있었고 바이올린을 살펴보십시오. 도움이 되었기를 바랍니다.

https://jsfiddle.net/way2ajay19/2kramzng/20/

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="MyCtrl">
  {{date | date:'yyyy-mm-dd hh:mm:ss' }}
</div>


<script>
function MyCtrl($scope) {
 $scope.d = "2017-07-21 19:47:00";
  $scope.d = $scope.d.replace(" ", 'T') + 'Z';
  $scope.date = new Date($scope.d);
}
</script>

다음과 같은 방식으로 필터를 선언 할 수 있습니까?

   app.filter('dateUTC', function ($filter) {

       return function (input, format) {
           if (!angular.isDefined(format)) {
               format = 'dd/MM/yyyy';
           }

           var date = new Date(input);

           return $filter('date')(date.toISOString().slice(0, 23), format);

       };
    });

날짜에 대한 사용자 지정 필터를 작성하여 UTC 형식으로 표시 할 수도 있습니다. 내가 toUTCString().

var app = angular.module('myApp', []);

app.controller('dateCtrl', function($scope) {
    $scope.today = new Date();
});
    
app.filter('utcDate', function() {
    return function(input) {
       return input.toUTCString();
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  
<div ng-app="myApp" ng-controller="dateCtrl">      
    Today is {{today | utcDate}}       
</div>


.Net에서 작업하는 경우 web.config에 다음을 추가하십시오.

<system.web>

문제를 해결할 것입니다.

<globalization culture="auto:en-US" uiCulture="auto:en-US" />

참고 URL : https://stackoverflow.com/questions/20662140/using-angularjs-date-filter-with-utc-date

반응형