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

Question

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

输入日期验证和转换.在尚不支持HTML5日期输入的浏览器中,将使用文本元素.在这种情况下,必须以有效的ISO-8601日期格式(yyyy-MM-dd)输入文本,例如:2009-01-06.由于许多现代浏览器尚不支持此输入类型,因此通过占位符或标签向用户提供预期输入格式的提示非常重要.

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

我试图在pattern's属性中定义新的日期格式,如下面的代码所示:

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

Answer 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