AngularJS - ubah tanggal di pengontrol


114

Adakah yang bisa menyarankan saya cara mengubah tanggal dari 1387843200000format ini ke 24/12/2013 dalam kontroler saya ?

FYI tanggal saya disimpan dengan cara ini & ketika mengikat ke formulir edit dengan input type="date"bidang tidak diisi sama sekali.

Demo #Plunker di sini.

EditCtrl

app.controller("EditCtrl", [ "$scope", "$filter", "db" function ($scope, $filter, db){

    // this gets me an item object
    var item = db.readItem();

    // item date = 1387843200000
    // this returns undefined 
    item.date = $filter('date')(date[ item.date, "dd/MM/yyyy"]);

}]);

Edit.html - template

<form name="editForm" class="form-validate">

        <div class="form-group">
            <label for="date">Event date.</label>
            <input type="date" class="form-control" ng-model="event.date" id="date" required />
        </div>

        <a href="#/" class="btn btn-danger ">Cancel</a>
        <button id="addEvent" class="btn btn-primary pull-right" ng-disabled="isClean() || editForm.$invalid" ng-click="saveEvent()">Save event.</button>

    </form>

1
Mengapa Anda perlu mengonversi pengontrol? Anda dapat menggunakan filter tanggal untuk memformat tanggal dalam tampilan Anda jika Anda hanya membutuhkan nilai yang dapat ditampilkan.
Justin Niessner

@JustinNiessner - tanggal saya disimpan dengan cara ini & saat mengikat ke formulir edit dengan input type="date"bidang tidak diisi
Iladarsda

1
Anda dapat menggunakan moment.js angularjs waktu tanggal filter - github.com/urish/angular-moment
Virender

Jawaban:


212
item.date = $filter('date')(item.date, "dd/MM/yyyy"); // for conversion to string

http://docs.angularjs.org/api/ng.filter:date

Tetapi jika Anda menggunakan HTML5 type = "date" maka format ISO yyyy-MM-dd HARUS digunakan.

item.dateAsString = $filter('date')(item.date, "yyyy-MM-dd");  // for type="date" binding


<input type="date" ng-model="item.dateAsString" value="{{ item.dateAsString }}" pattern="dd/MM/YYYY"/>

http://www.w3.org/TR/html-markup/input.date.html

CATATAN: penggunaan pattern = "" dengan type = "date" terlihat tidak standar, tetapi tampaknya berfungsi dengan cara yang diharapkan di Chrome 31.


Hai, saya mencoba menerapkan seperti yang disarankan, tetapi tidak berhasil untuk saya.
Mukun

Hai, saya mencoba menerapkan seperti yang disarankan, tetapi tidak berhasil untuk saya. tanggapan saya dari layanan web musim semi adalah {"basicPersonalInfo": {"empNo": "04005001", "dob": 490645800000}, "communicationInfo": null}, saya perlu menampilkannya di bidang masukan tanggal bootstrap / HTML5. Saya menggunakan filter di controller saya seperti $ scope.basicInfo = BasicInformationService.query (); $ scope.basicInfo. $ promise.then (fungsi (data) {$ scope.basicInfo.basicPersonalInfo.dob = $ filter ('date') (data.basicPersonalInfo.dob, "yyyy-MM-dd");}); bantuan apa pun dihargai
Mukun

1
ok saya mengubah format di pengontrol saya seperti ini dan tampaknya berfungsi, tidak yakin apakah itu cara yang benar. $ scope.basicInfo.basicPersonalInfo.dob = Tanggal baru ($ filter ('date') (data.basicPersonalInfo.dob, "yyyy-MM-dd"));
Mukun

Tanggal saya datang seperti ini dari API DateTime: "2017/12/15" tetapi melakukan ini {{M.DateTime | date: 'dd-MM-yyyy'}} tidak mengubah format tanggal.Bagaimana cara memformatnya di dalam ekspresi?
Vishal Singh

16

buat filter.js dan Anda dapat menjadikannya sebagai dapat digunakan kembali

angular.module('yourmodule').filter('date', function($filter)
{
    return function(input)
    {
        if(input == null){ return ""; }
        var _date = $filter('date')(new Date(input), 'dd/MM/yyyy');
        return _date.toUpperCase();
    };
});

melihat

<span>{{ d.time | date }}</span>

atau dalam pengontrol

var filterdatetime = $filter('date')( yourdate );

Tanggal pemfilteran dan pemformatan di Angular js.


1
Sepertinya sudah ada filter tanggal yang dibangun di AngularJS: docs.angularjs.org/api/ng/filter/date
AlikElzin-kilaka

1

Semua solusi di sini tidak benar-benar mengikat model ke input karena Anda harus mengubah kembali dateAsStringuntuk disimpan seperti datepada objek Anda (di pengontrol setelah formulir akan dikirimkan).

Jika Anda tidak membutuhkan efek penjilidan, tetapi hanya untuk menampilkannya di masukan,

yang sederhana bisa jadi:

<input type="date" value="{{ item.date | date: 'yyyy-MM-dd' }}" id="item_date" />

Kemudian, jika Anda suka, di pengontrol, Anda dapat menyimpan tanggal yang diedit dengan cara ini:

  $scope.item.date = new Date(document.getElementById('item_date').value).getTime();

berhati-hatilah: di pengontrol Anda, Anda harus mendeklarasikan itemvariabel Anda sebagai $scope.itemagar ini berfungsi.


1

saya sarankan dalam Javascript:

var item=1387843200000;
var date1=new Date(item);

dan kemudian tanggal1 adalah Tanggal.


Ya, hak Anda di mana kami ingin mengubah cap waktu kami menjadi tanggal
macha devendher
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.