<p class="input-group">
<input type="text" datepicker-popup="MM/dd/yyyy" is-open="opened" close-text="Close"
ng-model="someDate" class="form-control" placeholder="mm/dd/yyyy"
ng-pattern="/^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/" required />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
如果我将相同的ng模式应用于普通输入字段(无日期戳),则可以按预期方式工作.
似乎有一个冲突,但我不知道是什么.有任何想法吗？
更新：
Here是一个简单的空间,可根据要求说明问题.在进一步挖掘之后,它似乎正在对基础的Date对象运行模式.当我使用格式化日期的自定义指令时,它会根据实际输入运行它.
我所看到的ng-pattern的唯一文档是输入下简短的here.还有什么可能我失踪了吗？
您可以做的是创建自己的指令,钩入$parsers of the ngModelController运行您的模式检查,然后根据该值调用$setValidity(). $解析器实际上是为这种类型的功能构建的,您希望在ngModel值上运行自己的自定义验证.
遵循这些项目符号是一个将完成所需功能的指令.在我向你显示代码之前,我要解释指令中的逻辑：
>为了添加您自己的$解析器,您必须在指令定义中添加ngModel的要求,以便您可以访问ngModelController
>因为RegExp期望模式参数没有开始和尾部斜杠,我在pattern指令参数中删除它们
> datepicker将模型值从String更改为Date.因为datepicker使用unshift将$parser函数添加到$parsers数组的开头,所以我们还需要使用unshift将我们的$parser放在datepicker的$parser之前.
>如前所述,datepicker指令将采用任何可以解析为日期的值,并将其用于模型.为了确保仅使用与模式匹配的日期,我将返回未定义(如文档中指定的)与模式不匹配的日期.我没有这样检查作为Date对象的值,因为这意味着它是使用datepicker小部件选择的.
>正如我刚刚提到的,在以前的项目符号中,我没有进行有效性检查,如果该值已经是一个Date对象,因为这意味着它是使用datepicker小部件选择,这意味着它是一个有效的日期.
指令码
app.directive('awDatepickerPattern',function() {
return {
restrict: 'A',require: 'ngModel',link: function(scope,elem,attrs,ngModelCtrl) {
var dRegex = new RegExp(attrs.awDatepickerPattern);
ngModelCtrl.$parsers.unshift(function(value) {
if (typeof value === 'string') {
var isValid = dRegex.test(value);
ngModelCtrl.$setValidity('date',isValid);
if (!isValid) {
return undefined;
}
}
return value;
});
}
};
});
html – 确保您不要忘记删除正则表达式定义中的开始和尾部斜杠：
aw-datepicker-pattern="^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$"
那么为什么再次没有ng模式工作？
如果您没有注意到为什么ng-pattern在与datepicker指令一起使用时不起作用的根本原因是因为datepicker指令通过使用unshift将其自己的ngModelController $parser添加到$parsers数组的开头,哪些更改从String到Date的模型值.
