Question

我正在尝试使用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。

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

Answer 2

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

NG-图案='/（（[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}））$ /'

这应该有用。

Answer 3

使用此ng-pattern也适用于闰年。为MM-dd-YYYY＆＃39;工作格式。

NG-图案=＆＃39; / ^（（（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））））$ /＆＃39;

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

3 个答案: