Angular JS 和 JQuery 日期选择器

Question

我的生日字段是由 JQuery 使用 datepicker 函数创建的，然后当我提交表单时存在错误处理但当我选择字段中的日期错误消息未删除。

<input type="text name="birthdate" id="datepicker" ng-model="birthdate" readonly required >
  <span id="errordate" ng-show="submitted && form.birthdate.$error.required">*required</span><br>

<script>
          $function(){
           $('#datepicker').datepicker();
         });
</script>

Here is the form look at the birthdate field 请帮助我谢谢。

Answer 1

JQuery 和 angular 是 paradigmatically 不同。

如果您想要一个 jQuery 之类的查询选择器。请使用 angular 中的 built in jQuery。

对于日期选择器，您应该使用 Ui-bootstrap. 它是 100% angular 兼容的。您不会看到这些错误。

Take a look in this snippet with ui-bootstrap here.

如果您需要使用jQuery。任何时候你有机会 angular 是 "watching" 的任何属性你都必须更新 angular 的摘要：

$scope.$apply()

其中所有 $scope 属性都将更新值。

However, I strongly suggest you to don't use $apply() never. I suggest you to not use jQuery as well.

Answer 2

当jQueryDatePicker apply change to <input>时，AngularJS不知道这个改变，必须调用$scope.$apply()让AngularJS检查并apply新的变化。但我认为您应该使用 $timeout 来应用此更改并避免 AngularJS inprog 错误，更多信息 here.

这是我的ONLINE DEMO。希望对您有所帮助！

Angular JS 和 JQuery 日期选择器

Angular JS and JQuery datepicker

error-handling

jquery

datepicker

required

angularjs