angularjs date format validation on input type date

Question

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.

@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
– Willy, Commented Mar 30, 2016 at 10:35
I guess it depends on the format of your system date...Not sure... — Rayon
– Rayon, Commented Mar 30, 2016 at 10:36
Have you considered using ui-bootstrap's datepicker ? It has everything you want and more — Robin-Hoodie
– Robin-Hoodie, Commented Mar 30, 2016 at 10:43

RobG · Accepted Answer · 2016-03-30 12:42:29Z

8

I think you should write an ad hoc directive, to be really cross-browser compatible...
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

edited Mar 30, 2016 at 12:42

RobG

148k32 gold badges180 silver badges216 bronze badges

answered Mar 30, 2016 at 10:42

MarcoS

17.8k27 gold badges101 silver badges189 bronze badges

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

Comments

Raghav · Accepted Answer · 2016-03-30 11:39:24Z

1

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.

edited Mar 30, 2016 at 11:39

answered Mar 30, 2016 at 10:50

Raghav

537 bronze badges

Comments

dev verma · Accepted Answer · 2017-03-30 05:13:41Z

0

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))))$/'

answered Mar 30, 2017 at 5:13

dev verma

7771 gold badge9 silver badges19 bronze badges

Collectives™ on Stack Overflow

angularjs date format validation on input type date

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related