Datepicker 不适用于通过角度范围变量填充的表单答案

【问题标题】：Datepicker not working on form populated through angular scope variablesDatepicker 不适用于通过角度范围变量填充的表单
【发布时间】：2017-02-05 00:02:22
【问题描述】：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
          $( function() {
            $( ".datepicker" ).datepicker();
          } );
</script>

<form>
    <input type="text" class="form-control datepicker" ng-model="item[2]">
</form>

考虑上述代码（假设item[2] 具有有效的日期值）。我希望在单击输入字段时弹出datepicker。出乎意料的是，这不起作用，并且没有显示日期选择器弹出窗口。

【问题讨论】：

首先，这个$( "#datepicker" ) 不匹配任何东西。其次，你应该像这样加载它，例如：stackoverflow.com/a/18447446/1414562（应该是$(element).datepicker()）
在您进行编辑之后，类与 ID 不同...但是无论如何，您最好提供您正在使用的代码，而不是一些随机代码，因为它可能更难以捕捉到什么是你的错误

标签： jquery angularjs frontend jquery-ui-datepicker angularjs-ng-model

【解决方案1】：

你不应该在你的 Angular 应用程序中使用 jquery。创建一个类似这样的指令

App.directive('myAppDatePicker', function() {
    return {
    restrict: 'A',
    link: function(scope, element, attrs) {
       $(element).datepicker(ConfigOptions);
     }
  };
});

并像这样使用它

<form>
   <input type="text" id="datepicker" class="form-control datepicker" ng-model="item[2]" my-app-date-picker>
 </form>

否则，您也可以使用 angular-ui-bootstrap datepicker，他们已经在其中创建了指令并使用它

Here是链接

如果你想使用有角度的材料设计，还有另一个。

Here 是那个链接。

两者都干净有效。

【讨论】：

【解决方案2】：

$( "#datepicker" ).datepicker();

在这里，您将 datepicker 应用于“datepicker”，其中 datepicker 是 id，并且您尚未将 id 分配给输入控件。请尝试以下方法：

<input id= 'datepicker' type="text" class="form-control datepickertouched" ng-model="item[2]">

【讨论】：

【解决方案3】：

$( ".something" ) 返回一个元素数组。 datepicker() 函数需要特定元素。试试这个

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
      $( function() {
        $( "#datepicker" ).datepicker();
      } );
</script>

<form>
    <input type="text" id="datepicker" class="form-control datepicker" ng-model="item[2]">
</form>

【讨论】：

【解决方案4】：

您只需要修改输入字段的 html：

<input type="text" id="datepicker" class="form-control datepickertouched" ng-model="item[2]">

访问link 以获取实时示例。

【讨论】：