Question

我正在尝试在表单中使用输入[date]，但angularjs不会验证任何日期：

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

如果我尝试将“alex”放在输入中，它会接受！

JSFiddle：http://jsfiddle.net/3GKeM/2/（请尝试使用firefox）

Answer 1

您正在尝试使用AngularJS 1.0中的AngularJS 1.3.x中的新功能，该功能不支持type="date"。

如果你想在FireFox上获得支持。你必须使用AngularJS。 1.3

您所指的文档适用于1.3

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

Answer 2

这与Firefox中的预期相同。 CanIUse.com报告称Firefox 32或更早版本尚不支持此HTML5功能。

如果您希望所有浏览器的行为相似，那么您需要实现一个javascript解决方案。我建议jQuery UI Datepicker。它被许多人使用，它可以正常使用它（你可以实际自定义），并且有很多关于如何使用它的例子。

其他选择：

<强>更新

您声明您已拥有自己的日期选择器（在下面的评论中），您只是在寻找验证：您可能需要考虑查看HTML5 Patterns - Date。他们有各种Regex验证解决方案。他们已经为您准备了几种不同的日期格式。

然后您可以使用Angular ng-patter传递regex：

示例：

<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

Answer 3

我会使用ng-validate和regex来检查输入值的格式，或者因为我相信ng-validate已被弃用，具体取决于您使用的版本，我会在输入中使用ng-change将表单模型传递给函数的位置，然后检查值的格式并将模型设置为无效或有效。这是我从我的应用程序中提取的一个工作示例，我检查它是否实际上是一个电话号码，它以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);
            }
        }

Answer 4

关于什么构成有效日期存在浏览器不一致。 firefox中的有效日期字符串或即，在chrome中无效，反之亦然。我通过创建一个非常好的自定义验证指令解决了类似的问题。你可以在这里找到它： http://jsfiddle.net/fortesl/2uv6xmjL/6/ 如下所示：

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;
        });
    }
};

}]）;

Angular没有验证日期类型

4 个答案: