AngularJS 对输入类型日期进行日期格式验证

我正在尝试使用 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 https://jsfiddle.net/o8b3dxbn/.

我认为你应该写一个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 http://jsfiddle.net/Blackhole/Vq65z/14/