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.