AngularJS - convertir les dates dans le contrôleur


114

Quelqu'un pourrait-il me suggérer comment convertir la date de ce 1387843200000format en celui-ci à l' 24/12/2013 intérieur de mon contrôleur ?

Juste pour info, mes dates sont stockées de cette manière et lorsque la liaison pour modifier le formulaire avec le input type="date"champ n'est pas du tout renseignée.

Démo #Plunker ici.

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 - modèle

<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
Pourquoi avez-vous besoin de convertir le contrôleur? Vous pouvez utiliser le filtre de date pour mettre en forme la date dans votre vue si vous avez juste besoin d'une valeur affichable.
Justin Niessner

@JustinNiessner - mes dates sont stockées de cette manière et lorsque la liaison au formulaire d'édition avec le input type="date"champ n'est pas remplie
Iladarsda

1
Vous pouvez utiliser le filtre de date et d'heure moment.js angularjs - github.com/urish/angular-moment
virender

Réponses:


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

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

Mais si vous utilisez HTML5 type = "date", alors le format ISO aaaa-MM-jj DOIT être utilisé.

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

REMARQUE: l'utilisation de pattern = "" avec type = "date" ne semble pas standard, mais semble fonctionner comme prévu dans Chrome 31.


Salut, j'ai essayé de mettre en œuvre comme suggéré, mais cela ne fonctionne pas pour moi.
Mukun

Salut, j'ai essayé de mettre en œuvre comme suggéré, mais cela ne fonctionne pas pour moi. ma réponse du service Web de printemps est {"basicPersonalInfo": {"empNo": "04005001", "dob": 490645800000}, "communicationInfo": null}, je dois l'afficher dans mon champ de saisie de date bootstrap / HTML5. J'ai utilisé le filtre dans mon contrôleur comme $ scope.basicInfo = BasicInformationService.query (); $ scope.basicInfo. $ promise.then (function (data) {$ scope.basicInfo.basicPersonalInfo.dob = $ filter ('date') (data.basicPersonalInfo.dob, "aaaa-MM-jj");}); toute aide est appréciée
Mukun

1
ok j'ai changé le formatage de mon contrôleur comme celui-ci et cela semble fonctionner, je ne sais pas si c'est la bonne façon. $ scope.basicInfo.basicPersonalInfo.dob = nouvelle date ($ filter ('date') (data.basicPersonalInfo.dob, "aaaa-MM-jj"));
Mukun

Ma date vient comme ceci de l'API DateTime: "2017/12/15" mais en faisant cela {{M.DateTime | date: 'jj-MM-aaaa'}} ne change pas le format de la date. Comment le formater dans l'expression?
Vishal Singh

16

créez un filter.js et vous pouvez le rendre réutilisable

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

vue

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

ou en contrôleur

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

Filtrage et formatage des dates dans Angular js.


1
Il semble qu'il existe déjà un filtre de date intégré dans AngularJS: docs.angularjs.org/api/ng/filter/date
AlikElzin-kilaka

1

Toutes les solutions ici ne lient pas vraiment le modèle à l'entrée car vous devrez modifier à nouveau le dateAsStringpour être enregistré comme datedans votre objet (dans le contrôleur une fois le formulaire soumis).

Si vous n'avez pas besoin de l'effet de liaison, mais simplement pour l'afficher dans l'entrée,

un simple pourrait être:

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

Ensuite, si vous le souhaitez, dans le contrôleur, vous pouvez enregistrer la date modifiée de cette manière:

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

attention: dans votre contrôleur, vous devez déclarer votre itemvariable comme $scope.itempour que cela fonctionne.


1

je suggère en Javascript:

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

puis date1 est une date.


Oui votre droit où nous voulons convertir notre horodatage en date
macha devendher
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.