无法在 Angular js 中绑定日历值答案

【问题标题】：Unable to bind the Calendar value in Angular js无法在 Angular js 中绑定日历值
【发布时间】：2016-07-28 09:00:55
【问题描述】：

我是 Angular js 的新手，并试图从 jquery 日历选择器中绑定日历日期的值，但它没有绑定接受所有其他字段绑定的日期。

这是我的 HTML

<input id="company" name="company"  ng-model="user.company"  type="text" placeholder="" class="form-control" required>

<input type="text"  name="exdate" ng-model="user.exdate"  id="exiprydate" placeholder="DD-MM-YYYY" class="form-control" required>

这是我的 jquery 代码

$(function () {
               $("#exiprydate").datepicker({                        
                      dateFormat: 'dd-mm-yy'
                    });
                });

这是我的控制器：

var app = angular.module('myApp', []);

app.controller('adminController', function($scope, $http, $location) {

    $scope.submitloginform = function(isValid, user) {
        console.log($scope.user);
    });

这是我可以选择日期的日历快照： enter image description here

【问题讨论】：

我建议您为日期选择器创建一个角度指令，您将能够在其中设置 ng-model 并且您将能够在其中设置所选日期的值。我过去就是这样做的。
创建一个包装器指令，如this answer中所示的此处

标签： javascript jquery html angularjs json

【解决方案1】：

只需为 datepicker 创建一个指令.. 像这样：

angular.module('myApp').directive('datePicker', function() {
  return {
   restrict: 'A',
   require: 'ngModel',
   scope: {
        ngModel: '='
   },
   link: function(scope, element, attrs, ngModelCtrl) {
        element.datepicker({
            onSelect: function(date) {
                ngModelCtrl.$setViewValue(date);
            }
        });
   }
  };
});

您的 HTML 将是：

<input date-picker type="text" ng-model="myDate" />

【讨论】：