117

Could anyone please suggest me how to convert date from this 1387843200000 format into this 24/12/2013 inside my controller?

Just FYI my dates are stored in this way & when binding to edit form with input type="date" field is not being populated at all.

#Plunker demo here.

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

<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>
Saju S J
  • 51
  • 1
  • 12
Iladarsda
  • 10,640
  • 39
  • 106
  • 170
  • 1
    Why do you need to convert in the controller? You can use the date filter to format the date in your view if you just need a display-able value. – Justin Niessner Nov 21 '13 at 20:50
  • @JustinNiessner - my dates are stored in this way & when binding to edit form with `input type="date"` field is not being populated – Iladarsda Nov 21 '13 at 20:53
  • 1
    You can use moment.js angularjs date time filter - https://github.com/urish/angular-moment – virender Sep 15 '15 at 15:33

4 Answers4

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

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

But if you are using HTML5 type="date" then the ISO format yyyy-MM-dd MUST be used.

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

NOTE: use of pattern="" with type="date" looks non-standard, but it appears to work in the expected way in Chrome 31.

Darryl Miles
  • 4,576
  • 1
  • 21
  • 20
  • Hi,I tried to implement as suggested,but it is not working for me. – Mukun Sep 30 '14 at 09:16
  • Hi,I tried to implement as suggested,but it is not working for me. my response from spring webservice is {"basicPersonalInfo":{"empNo":"04005001","dob":490645800000},"communicationInfo":null} , I need to display it in my bootstrap/HTML5 date input field. I used the filter in my controller like $scope.basicInfo = BasicInformationService.query(); $scope.basicInfo.$promise.then(function(data){ $scope.basicInfo.basicPersonalInfo.dob = $filter('date')(data.basicPersonalInfo.dob, "yyyy-MM-dd"); }); any help is appreciated – Mukun Sep 30 '14 at 09:22
  • 1
    ok I changed the formatting in my controller like this and it seem to work, not sure if it is the right way. $scope.basicInfo.basicPersonalInfo.dob =new Date($filter('date')(data.basicPersonalInfo.dob, "yyyy-MM-dd")); – Mukun Sep 30 '14 at 09:44
  • My date is coming like this from API DateTime : "2017/12/15" but doing this {{M.DateTime | date : 'dd-MM-yyyy'}} not changing date format.How do i format it inside the expression? – Vishal Singh Feb 23 '16 at 05:54
17

create a filter.js and you can make this as reusable

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

view

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

or in controller

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

Date filtering and formatting in Angular js.

Prashobh
  • 9,216
  • 15
  • 61
  • 91
1

All solutions here doesn't really bind the model to the input because you will have to change back the dateAsString to be saved as date in your object (in the controller after the form will be submitted).

If you don't need the binding effect, but just to show it in the input,

a simple could be:

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

Then, if you like, in the controller, you can save the edited date in this way:

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

be aware: in your controller, you have to declare your item variable as $scope.item in order for this to work.

Dudi
  • 3,069
  • 1
  • 27
  • 23
1

i suggest in Javascript:

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

and then date1 is a Date.

BrianPando
  • 117
  • 1
  • 4