AngularJS - converter datas no controlador


114

Alguém poderia me sugerir como converter a data deste 1387843200000formato para 24/12/2013 dentro do meu controlador ?

Apenas para sua informação, minhas datas são armazenadas dessa maneira e quando a vinculação ao formulário de edição com o input type="date"campo não está sendo preenchida.

#Plunker demo aqui.

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 - modelo

<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
Por que você precisa converter no controlador? Você pode usar o filtro de data para formatar a data em sua visualização se precisar apenas de um valor que possa ser exibido.
Justin Niessner

@JustinNiessner - minhas datas são armazenadas desta forma e quando a vinculação ao formulário de edição com o input type="date"campo não está sendo preenchida
Iladarsda

1
Você pode usar o filtro de data e hora moment.js angularjs - github.com/urish/angular-moment
virender

Respostas:


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

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

Mas se você estiver usando HTML5 type = "date" então o formato ISO yyyy-MM-dd DEVE ser usado.

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

NOTA: o uso de pattern = "" com type = "date" parece não ser padrão, mas parece funcionar da maneira esperada no Chrome 31.


Olá, tentei implementar conforme sugerido, mas não está funcionando para mim.
Mukun

Olá, tentei implementar conforme sugerido, mas não está funcionando para mim. minha resposta do spring webservice é {"basicPersonalInfo": {"empNo": "04005001", "dob": 490645800000}, "communicationInfo": null}, preciso exibi-lo em meu campo de entrada de data bootstrap / HTML5. Usei o filtro no meu controlador como $ scope.basicInfo = BasicInformationService.query (); $ scope.basicInfo. $ Promet.then (function (data) {$ scope.basicInfo.basicPersonalInfo.dob = $ filter ('date') (data.basicPersonalInfo.dob, "aaaa-MM-dd");}); qualquer ajuda é apreciada
Mukun

1
ok mudei a formatação no meu controlador assim e parece funcionar, não tenho certeza se é do jeito certo. $ scope.basicInfo.basicPersonalInfo.dob = new Date ($ filter ('date') (data.basicPersonalInfo.dob, "yyyy-MM-dd"));
Mukun

Minha data está vindo assim da API DateTime: "2017/12/15", mas fazendo isso {{M.DateTime | data: 'dd-MM-aaaa'}} sem alterar o formato da data.Como faço para formatá-lo dentro da expressão?
Vishal Singh

16

crie um filter.js e você pode torná-lo reutilizável

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

Visão

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

ou no controlador

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

Filtragem de data e formatação em Angular js.


1
Parece que já existe um filtro de data embutido no AngularJS: docs.angularjs.org/api/ng/filter/date
AlikElzin-kilaka

1

Todas as soluções aqui não vinculam realmente o modelo à entrada porque você terá que alterar novamente o dateAsStringpara ser salvo como dateem seu objeto (no controlador após o formulário ser enviado).

Se você não precisa do efeito de ligação, mas apenas para mostrá-lo na entrada,

um simples poderia ser:

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

Então, se quiser, no controlador, você pode salvar a data editada desta forma:

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

esteja ciente: em seu controlador, você deve declarar sua itemvariável $scope.itempara que isso funcione.


1

eu sugiro em Javascript:

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

e a data1 é uma data.


Sim, você está certo onde queremos converter nosso carimbo de data
macha devendher
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.