จัดรูปแบบวันที่เวลาใน AngularJS

ฉันจะแสดงวันที่และเวลาใน AngularJS อย่างถูกต้องได้อย่างไร?

เอาต์พุตด้านล่างแสดงทั้งอินพุตและเอาต์พุตโดยมีและไม่มีตัวกรองวันที่ AngularJS:

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

สิ่งนี้พิมพ์:

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

รูปแบบการแสดงผลที่ต้องการคือ 2010-10-28 23:40:23 0400หรือ2010-10-28 23:40:23 EST

v.Dt ไม่น่าจะเป็นวัตถุ Date ()

ดูhttp://jsfiddle.net/southerd/xG2t8/

แต่ในตัวควบคุมของคุณ:

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

รหัสของคุณควรใช้งานได้ตามที่คุณเห็นซอนี้

คุณจะต้องแน่ใจว่าของคุณv.Dtเป็นวัตถุDate ที่เหมาะสมเพื่อให้มันใช้งานได้

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

หรือถ้า dateFormat ถูกกำหนดในขอบเขตเป็น dateFormat = 'yyyy-MM-dd HH: mm: ss Z':

{{dt | date:dateFormat }}

ฉันรู้ว่านี่เป็นของเก่า แต่คิดว่าฉันจะเลือกตัวเลือกอื่นให้พิจารณา

เนื่องจากสตริงดั้งเดิมไม่มี demarker "T" การใช้งานเริ่มต้นใน Angular จึงไม่รับรู้ว่าเป็นวันที่ คุณสามารถบังคับใช้วันที่ใหม่ได้ แต่นั่นเป็นความเจ็บปวดเล็กน้อยในอาร์เรย์ เนื่องจากคุณสามารถไปป์ฟิลเตอร์เข้าด้วยกันคุณจึงอาจใช้ตัวกรองเพื่อแปลงอินพุตของคุณเป็นวันที่จากนั้นจึงใช้วันที่: ตัวกรองในวันที่แปลง สร้างตัวกรองแบบกำหนดเองใหม่ดังนี้:

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

จากนั้นในมาร์กอัปของคุณคุณสามารถรวมตัวกรองเข้าด้วยกัน:

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

คุณจะได้รับตัวกรอง "วันที่" ดังนี้:

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

สิ่งนี้จะให้วันที่ของวันนี้ในรูปแบบที่คุณต้องการ

นี่คือตัวกรองที่จะใช้สตริงวันที่หรือวัตถุจาวาสคริปต์ Date () ใช้Moment.jsและสามารถใช้ฟังก์ชันการแปลงMoment.jsใด ๆเช่น 'fromNow' ที่เป็นที่นิยม

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' }}

จะแสดงวันที่ 11 พ.ย. 2014

{{ anyDateObjectOrString | moment: 'fromNow' }}

จะแสดงเมื่อ10 นาทีที่แล้ว

หากคุณต้องการเรียกใช้ฟังก์ชันหลายช่วงเวลาคุณสามารถต่อสายได้ สิ่งนี้จะแปลงเป็น UTC แล้วจัดรูปแบบ ...

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

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

นี่คือตัวอย่างยอดนิยมบางส่วน:

<div>{{myDate | date:'M/d/yyyy'}}</div> 2014/07/04

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

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

คุณเคยเห็นส่วนคำสั่งการเขียน (ฉบับย่อ)ของเอกสารหรือไม่?

HTML

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

JS

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

ภายในคอนโทรลเลอร์รูปแบบสามารถกรองได้โดยการฉีด $ filter

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

ง่ายๆถ้าคุณต้องการแสดงผลเช่น "30 ม.ค. 2017 16:31:20 น." จากนั้นทำตามขั้นตอนง่ายๆ

ขั้นตอนที่ 1- ประกาศตัวแปรต่อไปนี้ในคอนโทรลเลอร์ js

$scope.current_time = new Date();

step2- แสดงในหน้า html เช่น

{{current_time | วันที่: 'สื่อ'}}

เราสามารถจัดรูปแบบวันที่ในมุมมองด้านข้างได้ง่ายมาก .... โปรดตรวจสอบตัวอย่างด้านล่าง:

{{dt | วันที่: "dd-MM-yyyy"}}

คุณสามารถใช้momentjsเพื่อใช้ตัวกรองวันที่และเวลาใน angularjs ตัวอย่างเช่น:

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

วันที่อยู่ในรูปแบบการประทับเวลา

เพิ่มการ$filterพึ่งพาในตัวควบคุม

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

ฉันขอแนะนำให้คุณใช้ moment.js มันได้รับการสนับสนุนที่ดีสำหรับการจัดรูปแบบวันที่ตามสถานที่

สร้างตัวกรองที่ใช้เมธอด moment.js ภายในสำหรับการจัดรูปแบบวันที่