Format Tanggal waktu di AngularJS

123

Bagaimana cara menampilkan tanggal dan waktu dengan benar di AngularJS?

Keluaran di bawah ini menunjukkan masukan dan keluaran, dengan dan tanpa filter tanggal AngularJS:

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

Ini mencetak:

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

Format tampilan yang diinginkan adalah 2010-10-28 23:40:23 0400atau2010-10-28 23:40:23 EST

bsr
sumber

Jawaban:

63

v.Dt sepertinya bukan objek Date ().

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

tetapi di pengontrol Anda:

scope.v.Dt = Date.parse(scope.v.Dt);
David Souther
sumber
David dalam tanggal kasus saya disimpan dalam format DD / MM / YYYY di Database. Saya mengonversi bahwa saya menunjukkannya format DD.MM.YYYY pengguna di kotak teks atau mengambil masukan pengguna dalam format itu dan hal yang sama diperbarui dalam model saya. bagaimana mengubahnya sebelum meneruskannya ke DB. bagaimana saya harus berubah
Yogesh
120

Kode Anda harus berfungsi seperti yang Anda lihat biola ini .

Anda harus memastikan bahwa Anda v.Dtadalah objek Tanggal yang tepat agar dapat berfungsi.

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

atau jika dateFormat didefinisikan dalam cakupan sebagai dateFormat = 'yyyy-MM-dd HH: mm: ss Z':

{{dt | date:dateFormat }}
Gloopy
sumber
Karena formatnya adalah pilihan kosmetik, lebih baik melakukannya langsung pada tampilan.
Puce
thnkx..super ans. apakah mungkin untuk menunjukkan waktu dalam format 12 jam?
Wisnu Prasad
dt dapat menjadi stempel waktu unix dalam format integer juga berfungsi
tom10271
itu tidak perlu menjadi Datetipe untuk variabel. Stempel waktu yang lama juga berfungsi dengan baik
Vlad
59

Saya tahu ini adalah barang lama, tetapi saya pikir saya akan memberikan opsi lain untuk dipertimbangkan.

Karena string asli tidak menyertakan demarker "T", implementasi default di Angular tidak mengenalinya sebagai tanggal. Anda dapat memaksanya menggunakan Tanggal baru, tetapi itu agak merepotkan pada array. Karena Anda dapat menyatukan filter, Anda mungkin dapat menggunakan filter untuk mengubah masukan Anda menjadi tanggal dan kemudian menerapkan tanggal: filter pada tanggal yang dikonversi. Buat filter ubahsuaian baru sebagai berikut:

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

Kemudian di markup Anda, Anda dapat menyatukan filter:

{{item.myDateTimeString | asDate | date:'shortDate'}}
Jim Wooley
sumber
Ya, lebih dapat diandalkan dan efisien .. Terima kasih telah berbagi
azhar_SE_nextbridge
56

Anda bisa mendapatkan filter 'tanggal' seperti ini:

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

Ini akan memberi Anda tanggal hari ini dalam format yang Anda inginkan.

CodeOverRide
sumber
lol ya, Leandro. Saya tidak tahu bagaimana bisa seperti itu. Saya pikir saya sedang berpikir 'gunakan'.
CodeOverRide
49

Berikut adalah filter yang akan mengambil string tanggal ATAU objek Date () javascript. Ini menggunakan Moment.js dan dapat menerapkan fungsi transformasi Moment.js , seperti 'fromNow' yang populer

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

Begitu...

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

akan menampilkan 11 November 2014

{{ anyDateObjectOrString | moment: 'fromNow' }}

akan ditampilkan 10 menit yang lalu

Jika Anda perlu memanggil beberapa fungsi momen, Anda dapat merangkainya. Ini mengubah ke UTC dan kemudian memformat ...

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

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

Charlie Martin
sumber
Itu metode yang lebih kuat ! Terima kasih!
Modder
2
Ini brilian dan juga bisa dikombinasikan dengan Moment Timezone. misal: {{foo.created_at | momen: 'tz': 'America / New_York' | momen: 'format': 'h: mm a z'}}
Dave Collins
22

Berikut beberapa contoh populer:

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

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

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

James Lawruk
sumber
sederhana, elegan dan persis seperti yang diminta
Ignotus
15

Pernahkah Anda melihat bagian Petunjuk penulisan (versi singkat) dari dokumentasi ?

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';
}
Mengejar
sumber
2
Saya pikir komentar Anda sangat valid. Belajar melakukan filter adalah bagian penting dari AngularJS. Sebenarnya tidak sesulit itu.
Spock
6

Di dalam pengontrol, format dapat disaring dengan memasukkan $ filter.

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

Sederhananya jika Anda ingin menghasilkan seperti "30 Jan 2017 4:31:20 PM" kemudian ikuti langkah sederhana

step1- Deklarasikan variabel berikut di js controller

$scope.current_time = new Date();

step2- tampilan di halaman html seperti

{{current_time | tanggal: 'medium'}}

shani singh
sumber
5

kami dapat memformat tanggal pada tampilan sisi dalam sudut sangat mudah .... silakan periksa contoh di bawah ini:

{{dt | tanggal: "hh-BB-yyyy"}}

Rajat-Systematix
sumber
3

Anda dapat menggunakan momentjsuntuk menerapkan filter tanggal-waktu di angularjs. Sebagai contoh:

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

Dimana tanggal dalam format cap waktu.

Rubi saini
sumber
1

Tambahkan $filterketergantungan di pengontrol.

var formatted_datetime = $filter('date')(variable_Containing_time,'yyyy-MM-dd HH:mm:ss Z')
Aniket B
sumber
2
Meskipun cuplikan kode ini dapat menyelesaikan pertanyaan, menyertakan penjelasan sangat membantu meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa mendatang, dan orang-orang itu mungkin tidak tahu alasan saran kode Anda. Harap juga mencoba untuk tidak membanjiri kode Anda dengan komentar penjelasan, ini mengurangi keterbacaan kode dan penjelasannya!
kayess
0

Saya akan menyarankan Anda untuk menggunakan moment.js itu mendapat dukungan yang baik untuk format tanggal menurut lokal.

buat filter yang secara internal menggunakan metode moment.js untuk memformat tanggal.

Rahul Tokase
sumber