CODEWITHSUNDEEP
javascriptangularjsdate
Willy
Willy

Reputation: 1729

angularjs date format validation on input type date

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.

Upvotes: 3

Views: 14917

Answers (3)

dev verma
dev verma

Reputation: 777

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

Upvotes: 0

MarcoS
MarcoS

Reputation: 17711

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

Upvotes: 8

Raghav
Raghav

Reputation: 53

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.

Upvotes: 1

Related Questions