CODEWITHSUNDEEP
javascriptangularjshtmldatedatetime
Arun
Arun

Reputation: 684

HTML5 input date format with angular scope

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

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

  2. 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?

Upvotes: 2

Views: 2629

Answers (2)

Sajal
Sajal

Reputation: 4401

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.

Upvotes: 3

P.S.
P.S.

Reputation: 16384

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,

Upvotes: 5

Related Questions