CODEWITHSUNDEEP
angularjsdate
user2024080
user2024080

Reputation: 5099

How to format a date from the date object in `ng-model`

I am getting date values from the ng-model from the controller. I would like to format the date as 10-22-2013 But in the output i am getting the date format as 10/22/2013

what is the correct way to format the date here?

js :

angular.module('dateInputExample', [])
     .controller('DateController', ['$scope', function($scope) {
       $scope.example = {
         value: new Date(2013, 9, 22)
       };
     }]);

html :

<form name="myForm" ng-controller="DateController as dateCtrl">
   <label for="exampleInput">Pick a date </label>
     <input type="date" id="exampleInput" name="input" ng-model="example.value" 
       placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />
   <div role="alert">
     <span class="error" ng-show="myForm.input.$error.required">
         Required!</span>
     <span class="error" ng-show="myForm.input.$error.date">
         Not a valid date!</span>
    </div>

</form>

Live Demo

Upvotes: 0

Views: 704

Answers (1)

jegtugado
jegtugado

Reputation: 5141

Using purely HTML5 there is no answer to your question. Refer to this link.

There is no way possible to change the format

We have to differentiate between the over the wire format and the browser's presentation format.

Wire format The HTML5 date input specification 1 refers to the RFC3339 specification 2, which specifies a full-date format equal to: yyyy-mm-dd. See section 5.6 of the RFC3339 specification for more details.

Presentation format Browsers are unrestricted in how they present a date input. At the time of writing Chrome has the most extensive date support [3]. It displays a date picker using the user's local calendar format. Opera (v10.6+) also displays a date picker, but shows the date in the wire format. Other browsers, such as Firefox 44.0.2 and Internet Explorer 9/10/11 display a text input field with the wire format.

References http://www.w3.org/TR/html-markup/input.date.html https://www.rfc-editor.org/rfc/rfc3339 https://plus.google.com/102860501900098846931/posts/hTcMLVNKnec

I suggest using angular-ui. It has a neat load of modules that makes everything easy for angular.

The markup in the view would look like this:

<p class="form-group">
    <label>Result</label>
    <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="date" />
</p>

And on the controller:

angular.module('ui.bootstrap.demo').controller('DateParserDemoCtrl', function ($scope, uibDateParser) {
  $scope.format = 'MM-dd-yyyy';
  $scope.date = new Date();
});

Upvotes: 2

Related Questions