我如何通過手表使jQuery datepicker在angularjs中工作？

Question

我正在嘗試在有角度的程序中使用jQuery datepicker。 我有一個使用了兩次的datepicker html。

如果用戶正在更改開始時間，我希望結束時間是一天之后。

我用一個類（tdate）定義了jQuery datepicker，它可以正常工作，但是它不能告訴手表日期已更改，因此我嘗試添加一個onSelect事件，使手表注意到更改。 在onSelect im中應用更改，以便手表注意但它總是更改創建類的范圍（例如，此處的startTime是第一個，因此無論我更改startTime還是endTime，更改為所選日期的那個都是startTime） 。

單擊時，如何使onSelect事件進入當前的日期選擇器范圍？ 或其他解決問題的方法

謝謝！

DateMenu.html：

<date-picker ng-model="startTime"></date-picker>
<date-picker ng-model="endTime"></date-picker>

DateMenu.js：

$scope.$watch('startTime', function ) {
    // adds a day from the start time
    $scope.endTime = new Date($scope.startTime + (1 * 24 * 60 * 60 * 1000));
});

DatePicker.html：

<input type="text" class="tdate" ng-model="t.date">

DatePicker.js：

$('.tdate').datepicker({
    onSelect: function (text) {
        var time = text.split('/');
        // the safe apply makes the watch know theres a change in t.date
        $scope.$root.safeApply(function () {
            $scope.t.date = new Date(time[1] + '/' + time[0] + '/' + time[2]); 
        });
    }
});

var dateUpdated = function () {
    // changes in other parts of the program
    $scope.ngModel = $scope.t.date.getTime();
}

$scope.$watch('t.date', dateUpdated);

Answer 1

你可以做這樣的事情

HTML

<date-picker ng-model="t.date"></date-picker>

---

腳本

.directive('datePicker', function(){
  return{
    restrict: 'E',
    link: function(scope, element, attributes){
      $('.tdate').datepicker({
          onSelect: function (selectedDate) {
              scope.ngModel = selectedDate;
              scope.$apply();
          }
      });
    },
    scope: {
      ngModel: '='
    },
    template: '<input type="text" class="tdate">'
  };
});

演示