AngularJS - конвертировать даты в контроллере


114

Может ли кто-нибудь предложить мне, как преобразовать дату из этого 1387843200000формата в этот 24/12/2013 внутри моего контроллера ?

Просто, к вашему сведению, мои даты хранятся таким образом, и при привязке к форме редактирования с input type="date"полем вообще не заполняется.

#Plunker демо здесь.

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 - шаблон

<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
Зачем конвертировать в контроллере? Вы можете использовать фильтр даты для форматирования даты в вашем представлении, если вам просто нужно отображаемое значение.
Джастин Нисснер

@JustinNiessner - мои даты хранятся таким образом, и когда привязка к форме редактирования с input type="date"полем не заполняется
Iladarsda

1
Вы можете использовать фильтр даты и времени moment.js angularjs - github.com/urish/angular-moment
virender

Ответы:


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

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

Но если вы используете HTML5 type = "date", то ДОЛЖЕН использоваться формат ISO yyyy-MM-dd.

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

ПРИМЕЧАНИЕ: использование pattern = "" с type = "date" выглядит нестандартным, но, похоже, работает ожидаемым образом в Chrome 31.


Привет, я пытался реализовать, как было предложено, но у меня это не работает.
Mukun

Привет, я пытался реализовать, как было предложено, но у меня это не работает. мой ответ от веб-службы Spring: {"basicPersonalInfo": {"empNo": "04005001", "dob": 490645800000}, "communicationInfo": null}, мне нужно отобразить его в поле ввода даты начальной загрузки / HTML5. Я использовал фильтр в своем контроллере, например $ scope.basicInfo = BasicInformationService.query (); $ scope.basicInfo. $ prom.then (функция (данные) {$ scope.basicInfo.basicPersonalInfo.dob = $ filter ('date') (data.basicPersonalInfo.dob, "yyyy-MM-dd");}); приветствуется любая помощь
Мукун

1
хорошо, я изменил форматирование в своем контроллере вот так, и, похоже, он работает, не уверен, что это правильный путь. $ scope.basicInfo.basicPersonalInfo.dob = новая дата ($ filter ('date') (data.basicPersonalInfo.dob, "yyyy-MM-dd"));
Mukun

Моя дата прибывает из API DateTime: «2017/12/15», но делаю это {{M.DateTime | date: 'dd-MM-yyyy'}} не меняет формат даты. Как отформатировать его внутри выражения?
Вишал Сингх,

16

создайте filter.js, и вы можете сделать его многоразовым

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

Посмотреть

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

или в контроллере

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

Фильтрация и форматирование даты в Angular js.


1
Кажется, в AngularJS уже встроен фильтр даты: docs.angularjs.org/api/ng/filter/date
AlikElzin-kilaka

1

Все решения здесь на самом деле не привязывают модель к входу, потому что вам придется вернуть обратно, dateAsStringчтобы сохранить, как dateв вашем объекте (в контроллере после отправки формы).

Если вам не нужен эффект привязки, а просто показать его во входных данных,

простой может быть:

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

Затем, если хотите, в контроллере вы можете сохранить отредактированную дату следующим образом:

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

имейте в виду: в вашем контроллере вы должны объявить свою itemпеременную, $scope.itemчтобы это работало.


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.