AngularJS - denetleyicide tarihleri ​​dönüştürün


114

Herhangi biri bana bu 1387843200000formattan tarihi 24/12/2013 kontrolörüm içinde buna nasıl dönüştüreceğimi önerebilir mi?

Bilginize, tarihlerim bu şekilde saklanır ve input type="date"alanı ile formu düzenlemek için bağlanma hiç doldurulmadığında.

#Plunker demosu burada.

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 - şablon

<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
Neden denetleyicide dönüştürmeniz gerekiyor? Yalnızca görüntülenebilir bir değere ihtiyacınız varsa, görünümünüzdeki tarihi biçimlendirmek için tarih filtresini kullanabilirsiniz.
— Justin Niessner

@JustinNiessner - Tarihlerim bu şekilde saklanıyor ve input type="date"alanla formu düzenlemek için bağlayıcı doldurulmadığında
— Iladarsda

1
Moment.js angularjs tarih zaman filtresini kullanabilirsiniz - github.com/urish/angular-moment
— virender

Yanıtlar:


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

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

Ancak, HTML5 type = "date" kullanıyorsanız, ISO biçimi yyyy-MM-gd KULLANILMALIDIR.

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

NOT: type = "date" ile pattern = "" kullanımı standart dışı görünüyor, ancak Chrome 31'de beklenen şekilde çalışıyor gibi görünüyor.


Merhaba, önerildiği gibi uygulamaya çalıştım ama benim için çalışmıyor.
— Mukun

Merhaba, önerildiği gibi uygulamaya çalıştım ama benim için çalışmıyor. Spring web servisinden aldığım yanıt {"basicPersonalInfo": {"empNo": "04005001", "dob": 490645800000}, "communicationInfo": null}, bunu bootstrap / HTML5 tarih girdi alanımda görüntülemem gerekiyor. Denetleyicimdeki filtreyi $ kapsam.basicInfo = BasicInformationService.query (); $ kapsam.basicInfo. $ promise.then (fonksiyon (veri) {$ kapsam.basicInfo.basicPersonalInfo.dob = $ süzgeç ('tarih') (data.basicPersonalInfo.dob, "yyyy-MM-gg");}); herhangi bir yardım için minnettarız
— Mukun

1
ok Denetleyicimdeki biçimlendirmeyi bu şekilde değiştirdim ve çalışıyor gibi görünüyor, doğru yol olup olmadığından emin değilim. $ kapsam.basicInfo.basicPersonalInfo.dob = yeni Tarih ($ filtre ['tarih') (data.basicPersonalInfo.dob, "yyyy-MM-gg"));
— Mukun

Randevum API DateTime: "2017/12/15" den şu şekilde geliyor ama bunu yapıyor {{M.DateTime | tarih: 'gg-AA-yyyy'}} tarih biçimini değiştirmiyor. İfade içinde nasıl biçimlendirebilirim?
— Vishal Singh

16

bir filter.js oluşturun ve bunu yeniden kullanılabilir hale getirebilirsiniz

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

görünüm

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

veya kontrolörde

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

Angular js'de tarih filtreleme ve biçimlendirme.


1
Görünüşe göre AngularJS'de yerleşik bir tarih filtresi var: docs.angularjs.org/api/ng/filter/date
— AlikElzin-kilaka

1

Buradaki tüm çözümler modeli gerçekten girdiye bağlamaz çünkü dateAsStringkaydedilecek olanı datenesnenizdeki gibi (form gönderildikten sonra denetleyicide) değiştirmeniz gerekecektir.

Bağlama efektine ihtiyacınız yoksa, ancak girişte göstermek istiyorsanız,

basit bir şey olabilir:

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

Ardından, isterseniz kontrolörde düzenlenmiş tarihi şu şekilde kaydedebilirsiniz:

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

dikkat edin: denetleyicinizde, bunun çalışması için itemdeğişkeninizi tanımlamanız gerekir $scope.item.


1

Javascript'te öneriyorum:

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

ve sonra tarih1 bir Tarih.


Evet, zaman
— damgamızı
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.