Question

<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。出乎意料的是，这不起作用，也没有显示日期选择器弹出窗口。

Answer 1

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

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

访问此link以获取实例。

Answer 2

$( ".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>

Answer 3

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

这里你在'datepicker'上应用了datepicker，其中datepicker是id而你没有为你的输入控件分配id。请尝试以下方式：

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

Answer 4

你不应该在角度应用程序中使用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是该链接。

两者都干净有效。

Datepicker无法处理通过角度范围变量填充的表单

4 个答案: