Định dạng Ngày giờ trong AngularJS

Làm cách nào để hiển thị đúng ngày và giờ trong AngularJS?

Đầu ra bên dưới hiển thị cả đầu vào và đầu ra, có và không có bộ lọc ngày AngularJS:

In: {{v.Dt}}  
AngularJS: {{v.Dt | date:'yyyy-MM-dd HH:mm:ss Z'}}

Bản in này:

In: 2012-10-16T17:57:28.556094Z 
AngularJS: 2012-10-16T17:57:28.556094Z

Định dạng hiển thị mong muốn là 2010-10-28 23:40:23 0400hoặc2010-10-28 23:40:23 EST

v.Dt có thể không phải là một đối tượng Date ().

Xem http://jsfiddle.net/southerd/xG2t8/

nhưng trong bộ điều khiển của bạn:

scope.v.Dt = Date.parse(scope.v.Dt);

Mã của bạn sẽ hoạt động như bạn có nó nhìn thấy fiddle này .

Bạn sẽ phải đảm bảo rằng bạn v.Dtlà một đối tượng Ngày thích hợp để nó hoạt động.

{{dt | date:'yyyy-MM-dd HH:mm:ss Z'}}

hoặc nếu dateFormat được xác định trong phạm vi là dateFormat = 'yyyy-MM-dd HH: mm: ss Z':

{{dt | date:dateFormat }}

Tôi biết đây là một món đồ cũ, nhưng nghĩ rằng tôi nên đưa ra một lựa chọn khác để xem xét.

Vì chuỗi ban đầu không bao gồm trình gỡ bỏ "T", nên việc triển khai mặc định trong Angular không nhận ra đó là một ngày. Bạn có thể buộc nó sử dụng Ngày mới, nhưng đó là một chút đau đớn trên một mảng. Vì bạn có thể kết hợp các bộ lọc với nhau, bạn có thể sử dụng bộ lọc để chuyển đổi đầu vào của mình thành một ngày và sau đó áp dụng bộ lọc date: vào ngày đã chuyển đổi. Tạo bộ lọc tùy chỉnh mới như sau:

app
.filter("asDate", function () {
    return function (input) {
        return new Date(input);
    }
});

Sau đó, trong đánh dấu của bạn, bạn có thể nối các bộ lọc với nhau:

{{item.myDateTimeString | asDate | date:'shortDate'}}

bạn có thể có được bộ lọc 'ngày' như thế này:

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

Điều này sẽ cung cấp cho bạn ngày hôm nay trong định dạng bạn muốn.

Đây là một bộ lọc sẽ lấy một chuỗi ngày HOẶC đối tượng Date () javascript. Nó sử dụng Moment.js và có thể áp dụng bất kỳ hàm chuyển đổi Moment.js nào , chẳng hạn như 'fromNow' phổ biến

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);
  };
});

Vì thế...

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

sẽ hiển thị ngày 11 tháng 11 năm 2014

{{ anyDateObjectOrString | moment: 'fromNow' }}

sẽ hiển thị 10 phút trước

Nếu bạn cần gọi nhiều hàm thời điểm, bạn có thể xâu chuỗi chúng. Điều này chuyển đổi sang UTC và sau đó định dạng ...

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

https://gist.github.com/cmmartin/341b017194bac09ffa1a

Dưới đây là một vài ví dụ phổ biến:

<div>{{myDate | date:'M/d/yyyy'}}</div> 7/4/2014

<div>{{myDate | date:'yyyy-MM-dd'}}</div> 2014/07-04

<div>{{myDate | date:'M/d/yyyy HH:mm:ss'}}</div> 7/4/2014 12:01:59

Bạn đã thấy phần Chỉ thị bằng văn bản (phiên bản ngắn) của tài liệu chưa?

HTML

<div ng-controller="Ctrl2">
      Date format: <input ng-model="format"> <hr/>
      Current time is: <span my-current-time="format"></span>
</div> 

Mã não

function Ctrl2($scope) {
  $scope.format = 'M/d/yy h:mm:ss a';
}

Trong bộ điều khiển, định dạng có thể được lọc bằng cách thêm bộ lọc $.

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

Đơn giản nếu bạn muốn xuất ra như "30 tháng 1, 2017 4:31:20 PM" thì hãy làm theo bước đơn giản

step1- Khai báo biến sau trong trình điều khiển js

$scope.current_time = new Date();

step2- hiển thị trong trang html như

{{current_time | ngày: 'trung bình'}}

chúng ta có thể định dạng ngày ở phía xem theo góc rất dễ dàng .... vui lòng kiểm tra ví dụ dưới đây:

{{dt | ngày: "dd-MM-yyyy"}}

Bạn có thể sử dụng momentjsđể triển khai bộ lọc thời gian trong angularjs. Ví dụ:

angular.module('myApp')
 .filter('formatDateTime', function ($filter) {
    return function (date, format) {
        if (date) {
            return moment(Number(date)).format(format || "DD/MM/YYYY h:mm A");
        }
        else
            return "";
    };
});

Trường hợp ngày ở định dạng tem thời gian.

Thêm $filterphụ thuộc trong bộ điều khiển.

var formatted_datetime = $filter('date')(variable_Containing_time,'yyyy-MM-dd HH:mm:ss Z')

Tôi sẽ đề nghị bạn sử dụng Moment.js, nó đã hỗ trợ tốt cho định dạng ngày theo địa phương.

tạo một bộ lọc sử dụng phương thức Moment.js để định dạng ngày.