输入类型日期的angularjs日期格式验证答案

【问题标题】：angularjs date format validation on input type date输入类型日期的angularjs日期格式验证
【发布时间】：2016-03-30 10:27:26
【问题描述】：

我正在尝试使用 AngularJS 并根据文档创建日期

带有日期验证和转换的输入。在不支持的浏览器中还支持 HTML5 日期输入，将使用文本元素。在那里面在这种情况下，必须以有效的 ISO-8601 日期格式输入文本 (yyyy-MM-dd)，例如：2009-01-06。由于许多现代浏览器都这样做尚不支持此输入类型，提供提示很重要用户通过占位符或标签了解预期的输入格式。

它只接受有效的 ISO-8601 日期格式 (yyyy-MM-dd)。

我尝试在pattern的属性中定义新的日期格式，如下代码所示：

<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>

但它不起作用。

那么如何将默认日期格式更改为dd/MM/yyyy。这是jsfiddle。

【问题讨论】：

docs.angularjs.org/api/ng/filter/date
@RayonDabre 我认为给出的链接是关于如何格式化日期显示，但我需要文本框接受dd/MM/yyyy 格式
我猜这取决于您的系统日期的格式...不确定...
@RayonDabre 我在我的系统日期上使用dd/MM/yyyy 格式
您考虑过使用ui-bootstrap's datepicker 吗？它有你想要的一切，还有更多

标签： javascript angularjs date

【解决方案1】：

我认为您应该编写一个 ad hoc 指令，以实现真正的跨浏览器兼容...
像这样的：

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

【讨论】：

【解决方案2】：

使用 ng-pattern 代替模式。
还可以使用正则表达式而不是日期格式来正确验证日期。

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

这应该可行。

【讨论】：

【解决方案3】：

使用此 ng 模式也适用于闰年。适用于“MM-dd-YYYY”格式。

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

【讨论】：