Cara memformat tanggal dalam angularjs


143

Saya ingin memformat tanggal sebagai mm/dd/yyyy. Saya mencoba yang berikut dan tidak ada yang berhasil untuk saya. Adakah yang bisa membantu saya dengan ini?

referensi: ui-date

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" /> 

<input type="date" ng-model="valueofdate" />

1
Sudahkah Anda mencoba menghapus ui-date-format="mm/dd/yyyy"semuanya? Sepertinya perilaku default tanpa opsi ini adalah apa yang Anda inginkan.
Lukas

Sudahkah Anda mencoba moment.js?
Cétia

Tidak, saya belum mencoba moment.js. Server saya mengembalikan saya string Json 20140313T00: 00: 00. Saya mencoba cara input tipe html5 tanggal dan ui-date-format. Menghapus ui-date-format mengatakan itu string berikan format.
pengguna16

Menggunakan $formattersdan $parsersper jawaban ini memecahkan masalah saya yang serupa.
Ross Rogers

Anda dapat menggunakan filter dalam html dan juga dari javascript, silakan lihat: stackoverflow.com/a/27615392/1904479
Kailas

Jawaban:


204

Angular.js memiliki filter tanggal bawaan.

demo

// in your controller:
$scope.date = '20140313T00:00:00';

// in your view, date property, filtered with date filter and format 'MM/dd/yyyy'
<p ng-bind="date | date:'MM/dd/yyyy'"></p>

// produces
03/13/2014

Anda dapat melihat format tanggal yang didukung di sumber untuk filter tanggal .

edit :

Jika Anda mencoba untuk mendapatkan format yang benar di datepicker (tidak jelas apakah Anda menggunakan datepicker atau hanya mencoba menggunakan formatter itu), string format yang didukung ada di sini: https://api.jqueryui.com/datepicker/


1
server mengembalikan saya '20140313T00: 00: 00 dan saya ingin menampilkan dalam format mm / hh / tttt di input seperti ini - <input type = date "ng-model =" mydate ">
user16

Saya tidak yakin mengapa jawaban saya dibatalkan. Jawaban ini diambil hampir kata demi kata dari dokumen Angular. Penyebutan string format datepicker jQueryUI adalah karena modul yang digunakan dalam pertanyaan adalah ui-date yang memiliki ketergantungan pada jQuery dan jQueryUI. Tidak ada yang salah atau menyesatkan dalam jawabannya.
Jim Schubert

Saya tidak berpikir tautan UI jQuery benar untuk format string. docs.angularjs.org/api/ng/filter/date tampaknya lebih akurat.
TrueWill

@TrueWill OP secara khusus menanyakan tentang ui-date, yang menggunakan datepicker jQuery. Tautan pertama dalam posting saya menghubungkan ke kode sumber yang memiliki format string yang didukung oleh angular.
Jim Schubert

@JimSchubert ini adalah string tanggal saya '2013-11-11 00:00:00' dan tidak akan dikonversi | tanggal: 'longdate', ada saran?
alphapilgrim

97

Jika Anda tidak memiliki bidang input, alih-alih hanya ingin menampilkan tanggal string dengan pemformatan yang tepat, Anda dapat langsung menuju:

<label ng-bind="formatDate(date) |  date:'MM/dd/yyyy'"></label>

dan dalam penggunaan file js:

    // @Function
    // Description  : Triggered while displaying expiry date
    $scope.formatDate = function(date){
          var dateOut = new Date(date);
          return dateOut;
    };

Ini akan mengonversi tanggal dalam string ke objek tanggal baru dalam javascript dan akan menampilkan tanggal dalam format MM / hh / tttt.

Output: 12/15/2014

Edit
Jika Anda menggunakan tanggal string format string "2014-12-19 20:00:00" format (lulus dari PHP backend), maka Anda harus memodifikasi kode ke yang ada di: https://stackoverflow.com / a / 27616348/1904479

Menambah lebih lanjut
Dari javascript Anda dapat mengatur kode sebagai:

$scope.eqpCustFields[i].Value = $filter('date')(new Date(dateValue),'yyyy-MM-dd');

jika Anda sudah berkencan dengan Anda, Anda dapat menggunakan kode berikut untuk mendapatkan tanggal sistem saat ini:

$scope.eqpCustFields[i].Value = $filter('date')(new Date(),'yyyy-MM-dd');

Untuk detail lebih lanjut tentang Format tanggal, lihat: https://docs.angularjs.org/api/ng/filter/date


27

Saya menggunakan ini dan itu berfungsi dengan baik.

{{1288323623006 | date:'medium'}}: Oct 29, 2010 9:10:23 AM
{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}: 2010-10-29 09:10:23 +0530
{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}: 10/29/2010 @ 9:10AM
{{1288323623006 | date:"MM/dd/yyyy 'at' h:mma"}}: 10/29/2010 at 9:10AM

ini tidak berfungsi untuk saya, jika saya melewatkan objek Date JS. ada saran kenapa?
Panshul

Ini harus berfungsi hanya untuk format tanggal di mana tanggal dalam milidetik dan dalam kasus Anda tanggal dalam Format Tanggal. Ikuti: w3schools.com/js/js_date_formats.asp
Ravindra

18

Ini sebenarnya tidak persis seperti yang Anda minta - tetapi Anda dapat mencoba membuat bidang input tanggal dalam html seperti:

<input type="date" ng-model="myDate" />

Kemudian untuk mencetak ini pada halaman yang akan Anda gunakan:

<span ng-bind="convertToDate(myDate) | date:'medium'"></span>

Akhirnya, pada pengontrol saya, saya mendeklarasikan metode yang membuat tanggal dari nilai input (yang di krom ternyata diuraikan 1 hari libur):

$scope.convertToDate = function (stringDate){
  var dateOut = new Date(stringDate);
  dateOut.setDate(dateOut.getDate() + 1);
  return dateOut;
};

Jadi begitulah. Untuk melihat semuanya berfungsi, lihat plunker berikut: http://plnkr.co/edit/8MVoXNaIDW59kQnfpaWW?p=preview. Semoga beruntung! Semoga beruntung!


11

Ini akan berhasil:

{{ oD.OrderDate.replace('/Date(','').replace(')/','') | date:"MM/dd/yyyy" }}

CATATAN: setelah Anda mengganti ini maka sisa tanggal / milis akan dikonversi menjadi foramt yang diberikan.


untuk beberapa alasan bidang saya dalam format / Tanggal ini (99999) / to, apakah Anda tahu mengapa?
Antonio Correia

9

lihat dateapi sudut : API AngularJS: date


The Angular - datefilter:

Pemakaian:

{{ date_expression | date  [: 'format']  [: 'timezone' ] }}


Contoh:

Kode:

 <span>{{ '1288323623006' | date:'MM/dd/yyyy' }}</span>

Hasil:

10/29/2010

7

Saya menggunakan filter

.filter('toDate', function() {
  return function(items) {
    return new Date(items);
  };
});

kemudian

{{'2018-05-06 09:04:13' | toDate | date:'dd/MM/yyyy hh:mm'}}

3

Cukup berikan format tanggal UTC dari kode sisi server Anda ke sisi klien

dan gunakan sintaks di bawah ini -

 {{dateUTCField  +'Z' | date : 'mm/dd/yyyy'}}

 e.g. dateUTCField = '2018-01-09T10:02:32.273' then it display like 01/09/2018

1

Setelah melihat semua solusi di atas, berikut ini adalah solusi tercepat untuk saya. Jika Anda menggunakan bahan sudut:

 <md-datepicker ng-model="member.reg_date" md-placeholder="Enter date"></md-datepicker>

Untuk mengatur format:

app.config(function($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function(date) {
        // Requires Moment.js OR enter your own formatting code here....
        return moment(date).format('DD-MM-YYYY');
    };
});

Sunting: Anda juga perlu mengatur parseDate untuk mengetikkan tanggal (dari jawaban ini Ubah format md-datepicker dalam Bahan Angular )

$mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'DD/MM/YYYY', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
};

1
var app=angular.module('myApp',[]);
        app.controller('myController',function($scope){         
              $scope.names = ['1288323623006','1388323623006'];

        });

Di sini nama Controller adalah "myController" dan nama aplikasi adalah "myApp".

<div ng-app="myApp" ng-controller="myController">
        <ul>
            <li ng-repeat="x in names">
                {{x | date:'mm-dd-yyyy'}}

            </li>

        </ul>
    </div>

Hasilnya akan terlihat seperti ini: - * 10-29-2010 * 01-03-2013


0

Oke masalah ini sepertinya berasal dari baris ini:
https://github.com/angular-ui/ui-date/blob/master/src/date.js#L106 .

Sebenarnya baris ini mengikat dengan jQuery UI yang seharusnya menjadi tempat untuk menyuntikkan format data.

Seperti yang Anda lihat di var optssana, tidak ada properti dateFormatdengan nilai dari ng-date-format yang dapat Anda pilih.

Pokoknya direktif memiliki konstanta yang dipanggil uiDateConfiguntuk menambahkan properti opts.

Solusi fleksibel (disarankan):

Dari sini Anda dapat melihat Anda dapat menyisipkan beberapa opsi menyuntikkan dalam direktif variabel controller dengan opsi jquery ui.

<input ui-date="dateOptions" ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />

myAppModule.controller('MyController', function($scope) {
    $scope.dateOptions = {
        dateFormat: "dd-M-yy"
    };
});

Solusi hardcoded:

Jika Anda tidak ingin mengulangi prosedur ini setiap saat, ubah nilainya uiDateConfigdi date.js menjadi:

.constant('uiDateConfig', { dateFormat: "dd-M-yy" })

0

Saya memiliki masalah yang sama dan seperti komentar di atas, saya pikir pasti ada metode asli dalam JavaScript. Masalahnya adalah new Date(valueofdate)mengembalikan objek Date.

Tapi, periksa di http://www.w3schools.com/js/js_date_formats.asp , bagian yang mengatakan nol di depan. Tanggal dari String, misalnya gema dari PHP, harus seperti:

$valueofdate = date('Y-n-j',strtotime('theStringFromQuery'));

Ini akan melewatkan String, misalnya: '1999-3-3'dan JavaScript akan melakukan parsing ke objek dengan format yang tepat

$scope.valueofdate = new Date(valueofdate);

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />
<input type="date" ng-model="valueofdate" />

Tautan ke PHP untuk format tanggal: http://www.w3schools.com/php/func_date_date_format.asp .


0

ng-bind="reviewData.dateValue.replace('/Date(','').replace(')/','') | date:'MM/dd/yyyy'"

Gunakan ini harus bekerja dengan baik. :) Bidang reviewData dan dateValue dapat diubah karena parameter Anda dapat dibiarkan sama


0
{{convertToDate  | date :  dateformat}}                                             
$rootScope.dateFormat = 'MM/dd/yyyy';

1
Mengapa Anda memposting komentar dengan baris yang sama dengan jawaban Anda? Dan jawaban Anda hanya beberapa kode, tidak ada penjelasan sama sekali.
Pochmurnik

-1
// $scope.dateField="value" in ctrl
<div ng-bind="dateField | date:'MM/dd/yyyy'"></div>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.