HTML5 input date format with angular scope

Question

I have a HTML 5 input type="date".

<input type="date" required ng-model="nm.pick" id="dpicker ">

Then in my angular controller, I am assigning value

nm.pick = $filter("date")(Date.now(), 'dd/MM/yyyy');

Now this will give HTML5 default date format of yyyy-MM-dd.

But I want date format - dd/MM/yyyy

I cannot changed <input type="date"> to <input type="text" in my HTML. If I change, dateformat will work fine

Then I change input date to input text in controller

$("#dpicker").attr("type", "text");
nm.pick = $filter("date")(Date.now(), 'dd/MM/yyyy');

which is not working.

Basically I want to change the dateformat to dd/MM/yyyy in controller without altering HTML.

What are all the possible way to achieve this?

Would you like to use moment?

Jenny
– Jenny

2017-05-25 12:01:51 +00:00
Commented May 25, 2017 at 12:01 — Jenny
– Jenny, Commented May 25, 2017 at 12:01
yes definitely..

Arun
– Arun

2017-05-25 12:02:41 +00:00
Commented May 25, 2017 at 12:02 — Arun
– Arun, Commented May 25, 2017 at 12:02

P.S. · Accepted Answer · 2017-05-25 12:07:02Z

5

The best way that i know is to use momentjs. I have used it with angular 1.x.x with no problems. It's pretty easy to use, check this out. You can add the following row:

nm.pick = moment(nm.pick).format('DD-MM-YYYY');

This should solve your problem,

edited May 25, 2017 at 12:07

answered May 25, 2017 at 12:02

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arun Over a year ago

yeah..any brief way to use moment js for my problem?

Arun Over a year ago

Error: [ngModel:datefmt] Expected "2017-04-23T00:00:00.000Z"` to be a date` this error i'm getting... do i have to put new Date(date)?

P.S. Over a year ago

@Arun, look through this post: stackoverflow.com/questions/30537886/… It looks like this problem has an answer already

Sajal · Accepted Answer · 2017-05-25 12:28:53Z

3

For type="date" binding

var app = angular.module("MyApp", []).controller("MyCtrl", function($scope, $filter) {
  $scope.nm = {};
  $scope.nm.pick = new Date($filter('date')(new Date(), "yyyy-MM-dd"));
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>


<body ng-app="MyApp" ng-controller="MyCtrl">
    <input type="date" required ng-model="nm.pick" id="dpicker ">
</body>

Reading other answers, I'd advice the same to go with moment.js as it is an expert library when playing around with date/time and different timezone.

answered May 25, 2017 at 12:28

Sajal

4,4111 gold badge22 silver badges41 bronze badges

3 Comments

Arun Over a year ago

$filter doesnt work in my case, as i have mentioned above. failed to change format through momentjs also

Sajal Over a year ago

Which version of angular are you using.. this should work fine on above 1.3

Arun Over a year ago

i am using 1.3.8

Collectives™ on Stack Overflow

HTML5 input date format with angular scope

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related