I'm trying to create date using AngularJS and as per the documentation

Input with date validation and transformation. In browsers that do not yet support the HTML5 date input, a text element will be used. In that case, text must be entered in a valid ISO-8601 date format (yyyy-MM-dd), for example: 2009-01-06. Since many modern browsers do not yet support this input type, it is important to provide cues to users on the expected input format via a placeholder or label.

it only accepts valid ISO-8601 date format (yyyy-MM-dd).

I've tried to define the new date format in the pattern's attribute as shown in the following code:

<div ng-app="">
  <form name="frmSPA" novalidate>
    <input type="date" placeholder="Enter SPA Date" pattern="dd/MM/yyyy" name="SPADate" ng-model="SPADate" ng-required="true" />
    <span ng-show="frmSPA.SPADate.$touched && frmSPA.SPADate.$error.required">SPA Date is required</span>
    <span ng-show="frmSPA.SPADate.$touched && frmSPA.SPADate.$error.date">Not a valid date</span>
  </form>
</div>

but it doesn't work.

So how to change the default date format into dd/MM/yyyy. Here is the jsfiddle.

I'm trying to create date using AngularJS and as per the documentation

Input with date validation and transformation. In browsers that do not yet support the HTML5 date input, a text element will be used. In that case, text must be entered in a valid ISO-8601 date format (yyyy-MM-dd), for example: 2009-01-06. Since many modern browsers do not yet support this input type, it is important to provide cues to users on the expected input format via a placeholder or label.

it only accepts valid ISO-8601 date format (yyyy-MM-dd).

I've tried to define the new date format in the pattern's attribute as shown in the following code:

<div ng-app="">
  <form name="frmSPA" novalidate>
    <input type="date" placeholder="Enter SPA Date" pattern="dd/MM/yyyy" name="SPADate" ng-model="SPADate" ng-required="true" />
    <span ng-show="frmSPA.SPADate.$touched && frmSPA.SPADate.$error.required">SPA Date is required</span>
    <span ng-show="frmSPA.SPADate.$touched && frmSPA.SPADate.$error.date">Not a valid date</span>
  </form>
</div>

but it doesn't work.

So how to change the default date format into dd/MM/yyyy. Here is the jsfiddle.

• javascript
• angularjs
• date

Share Improve this question Follow asked Mar 30, 2016 at 10:27 WillyWilly 1,72977 gold badges3838 silver badges8282 bronze badges 6

• docs.angularjs/api/ng/filter/date – Rayon Commented Mar 30, 2016 at 10:30
• @RayonDabre I think the link given is about how to format the date display, but I need the textbox to accept dd/MM/yyyy format – Willy Commented Mar 30, 2016 at 10:35
• I guess it depends on the format of your system date...Not sure... – Rayon Commented Mar 30, 2016 at 10:36
• @RayonDabre I'm using dd/MM/yyyy format on my system date – Willy Commented Mar 30, 2016 at 10:39
• Have you considered using ui-bootstrap's datepicker ? It has everything you want and more – Robin-Hoodie Commented Mar 30, 2016 at 10:43

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 8

I think you should write an ad hoc directive, to be really cross-browser patible...
Something like this:

angular
    .module('MyApp', [])
    .controller('MainCtrl', function ($scope, dateFilter) {
        $scope.date = new Date();
    })
    .directive(
        'dateInput',
        function(dateFilter) {
            return {
                require: 'ngModel',
                template: '<input type="date"></input>',
                replace: true,
                link: function(scope, elm, attrs, ngModelCtrl) {
                    ngModelCtrl.$formatters.unshift(function (modelValue) {
                        return dateFilter(modelValue, 'dd-MM-yyyy');
                    });

                    ngModelCtrl.$parsers.unshift(function(viewValue) {
                        return new Date(viewValue);
                    });
                },
            };
    });

jsfiddle

Use ng-pattern instead of pattern.
Also use a regular expression instead of a date format to validate the date correctly.

ng-pattern='/(([0-2]?\d{1})|([3][0,1]{1}))/^[0,1]?\d{1}/(([1]{1}[9]{1}[9]{1}\d{1})|([2-9]{1}\d{3}))$/'

This should work.

Use this ng-pattern also working for leap year. Work for 'MM-dd-YYYY' format.

ng-pattern='/^(((0[13578]|1[02])-(0[1-9]|[12]\d|3[01])-((19|[2-9]\d)\d{2}))|((0[13456789]|1[012])-(0[1-9]|[12]\d|30)-((19|[2-9]\d)\d{2}))|(02-(0[1-9]|1\d|2[0-8])-((19|[2-9]\d)\d{2}))|(02-29-((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/'