CODEWITHSUNDEEP
angularjs
Alexandre TRINDADE
Alexandre TRINDADE

Reputation: 947

Angular doesn't validating date type

I'm trying to use input[date] in my form, but angularjs doesn't validate any date:

<form name="myForm">
    {{birthday}} <br/>
    <input type="date" ng-model="birthday" id="birthday" name="birthday"></input>
</form>

If I try to put "alex" inside the input, it accepts!

JSFiddle: http://jsfiddle.net/3GKeM/2/ (please try with firefox)

Upvotes: 3

Views: 2573

Answers (4)

fortesl
fortesl

Reputation: 681

There are browser inconsistencies as to what constitutes a valid date. A valid date string in firefox or ie, is invalid in chrome and vice-versa. I solved a similar issue by creating a custom validation directive that works quite nicely. you can find it here: http://jsfiddle.net/fortesl/2uv6xmjL/6/ Also shown below:

app.directive('dateFieldValidator', [function () {
var validateDate = function (date, format) {
    if (!date.length) {
        return true;
    }
    return moment(date, format.toUpperCase(), true).isValid();
};

return {
    restrict: 'A',
    require: 'ngModel',
    scope: {
        dateFormat: '@'
    },
    link: function (scope, elem, attrs, ngModelCtrl) {

        //For DOM -> model validation
        ngModelCtrl.$parsers.unshift(function (value) {
            var valid = validateDate(value, scope.dateFormat);
            ngModelCtrl.$setValidity('validDate', valid);
            return valid ? value : undefined;
        });

        //For Model Update --> DOM
        ngModelCtrl.$formatters.unshift(function (value) {
            var valid = validateDate(value, scope.dateFormat);
            ngModelCtrl.$setValidity('validDate', valid);
            return value;
        });
    }
};

}]);

Upvotes: 0

EnigmaRM
EnigmaRM

Reputation: 7632

This behaves as expected in Firefox. CanIUse.com reports that this HTML5 feature is not yet supported in Firefox 32 or earlier.

So you'll need to implement a javascript solution if you want all browsers to behave similarly. I'd suggest jQuery UI Datepicker. It's used by a lot of people, has an alright look to it (which you can customize actually) and there are lots of examples on how to use it.

Other options:

Update

You stated that you already have your own datepicker (in comments below), and you are just looking for validation: you may want to consider looking at HTML5 Patterns - Date. They have a variety of Regex solutions for validation. They have several different date formats already in place for you.

And then you can use Angular ng-patter to pass in the regex:

example: 

<input type="text" ng-pattern="[0-9]{4}-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01])"></input>
//accepts: YYYY-MM-DD

Upvotes: 1

Reactgular
Reactgular

Reputation: 54781

You're trying to use a new feature in AngularJS 1.3.x from AngularJS 1.0 which doesn't support type="date".

If you want that support on FireFox. You'll have to use AngularJS. 1.3

The documentation you're referring to is for 1.3

https://docs.angularjs.org/api/ng/input/input%5Bdate%5D

Upvotes: 3

btm1
btm1

Reputation: 3856

I would either use ng-validate and a regex to check the format of the input value or because i do believe ng-validate has been deprecated depending on what version you're using, I would use ng-change on the input where you pass the model for the form to a function where you then check the format of the value and set the model to be invalid or valid. Here's a working example I've pulled from my app where i check to see if it is in fact a phone number and that it begins with 1.

checkNumber: function(number,form) {
            var num = parseInt(number.replace(/[^0-9\.]+/g, '')),
                l = num.toString().length,
                first = num.toString()[0];

            console.log(num);
            if(number && first != '1' || number && l < 11) {
                form.$setValidity('phoneNumber',false);
                form.phoneNumber.$setValidity('format',false);
            } else {
                form.$setValidity('phoneNumber',true);
                form.phoneNumber.$setValidity('format',true);
            }
        }

Upvotes: 0

Related Questions