Angularjs和jquery datepicker數據綁定

Question

我正在用datepicker（JQuery）做一個項目。當我點擊日期選擇器中的日期時，它從不顯示日期，除非輸入空格或輸入。我希望當我點擊日期時，顯示點擊日期。

我希望在datepicker中點擊日期時，輸出會自動顯示日期。但我必須先按下空格鍵它生成/顯示日期。請幫助之前.. 這是我的代碼：

$(document).ready(function() { 
 
       $("#datepickerfrom").datepicker({ 
 
        numberOfMonths: 1, 
 
        onSelect: function (selected) { 
 
         $("#datepickerto").datepicker("option", selected) 
 
        } 
 
       }); 
 
       $("#datepickerto").datepicker({ 
 
        numberOfMonths: 1, 
 
        onSelect: function (selected) { 
 
         $("#datepickerfrom").datepicker("option", selected) 
 
        } 
 
       }); 
 
       // jQuery object; this demo 
 
      }); 
 
      function GetbyDate(fr, t) { 
 
       var from = new Date(t) 
 
      }; 
 

 
      scope.changeDate = function() { 
 
       scope.models = null; 
 
       http.get('GetReportList?from=' + scope.filter_fromDate + '&to=' + scope.filter_toDate).success(
 
        function (data) { 
 
         scope.models = data; 
 
        }); 
 
      }

   <p class="input-group"> 
 

 
           <input type="text" class="form-control" id="datepickerfrom" data-ng-model="filter_fromDate" /> 
 
           
 
           <span class="input-group-btn"> 
 
            <button type="button" class="btn btn-default"> 
 
             <i class="glyphicon glyphicon-calendar"></i> 
 
            </button> 
 
           </span> 
 
           {{filter_fromDate}} 
 
          </p> 
 

 
          <p class="input-group"> 
 
           <input type="text" class="form-control" id="datepickerto" data-ng-model="filter_toDate" /> 
 
           <span class="input-group-btn"> 
 
            <button type="button" class="btn btn-default"> 
 
             <i class="glyphicon glyphicon-calendar"></i> 
 
            </button> 
 
           </span> 
 
           {{filter_toDate}} 
 
          </p>

Answer 1

是的！我得到了答案..

感謝這sample jsfiddle answer。我發現我無法顯示日期的原因是我將它包含在控制器中。

對此一看：

var PRApp = angular.module('PRApp', []); 
 
     PRApp.controller('PRCtrl', ['$scope', '$http', function (scope, http) { 
 

 
      http.get('GetList').success(function (data) { 
 

 
       scope.models = data; 
 
       scope.sorting = "-PRDate"; 
 

 
       var i = 0; 
 
       for (i = 0; i < scope.models.length; i++) { 
 
        scope.models[i].id = i; 
 
       } 
 
      }); 
 

 
      scope.getStatus = http.get('GetStatusList').success(function (status) { 
 
       scope.StatusList = status 
 
      }); 
 

 
      function GetbyDate(fr, t) { 
 
       var from = new Date(t) 
 
      }; 
 

 
      scope.changeDate = function() { 
 
       scope.models = null; 
 
       http.get('GetReportList?from=' + scope.filter_fromDate + '&to=' + scope.filter_toDate).success(
 
        function (data) { 
 
         scope.models = data; 
 
        }); 
 
      } 
 
      scope.jsonDatetotext = function (jsondate) { 
 
       // jsondate format: /Date(#############)/ 
 
       // substr(6) will remove '/Date(' 
 
       // parseInt will convert remaing string '#############' to int and ignores ')/' 
 
       return new Date(parseInt(jsondate.substr(6))); 
 
      }; 
 

 

 
     }]); 
 
     PRApp.directive('calendar2', function() { 
 
      return { 
 
       require: 'ngModel', 
 
       link: function (scope, el, el2, attr, ngModel) { 
 

 
        attr.$observe("show", function (val) { 
 
         if (val == 'true') { 
 
          $(el).datepicker("show"); 
 
         } 
 
         else { 
 
          $(el).datepicker("hide"); 
 
         } 
 
        }); 
 

 
        attr.$observe("show", function (val) { 
 
         if (val == 'true') { 
 
          $(el2).datepicker("show"); 
 
         } 
 
         else { 
 
          $(el2).datepicker("hide"); 
 
         } 
 
        }); 
 

 
        $(el).datepicker({ 
 
         minDate: '-5Y', 
 
         dateFormat: 'MM d, yy', 
 
         onSelect: function (dateText) { 
 
          scope.$apply(function() { 
 
           ngModel.$setViewValue(dateText); 
 
          }); 
 
         } 
 
        }); 
 

 
        $(el2).datepicker({ 
 
         minDate: '-5Y', 
 
         dateFormat: 'MM d, yy', 
 
         onSelect: function (dateText) { 
 
          scope.$apply(function() { 
 
           ngModel.$setViewValue(dateText); 
 
          }); 
 
         } 
 
        }); 
 

 
       } 
 
      }; 
 
     });

<span class="input-group-addon"> 
 
            <span data-ng-click="show=!show" class="glyphicon glyphicon-calendar"></span> 
 
           </span> 
 
           <input data-show="{{show}}" type="text" name="filter_fromDate" calendar2 data-ng-model="filter_fromDate" 
 
            class="form-control" placeholder="mm/dd/yyyy" data-ng-minlength="10" /> 
 

 
           </div> 
 

 
                <br /> 
 

 
         <div class="input-group"> 
 
           <span class="input-group-addon"> 
 
            <span data-ng-click="show=!show" class="glyphicon glyphicon-calendar"></span> 
 
           </span> 
 
           <input data-show="{{show}}" type="text" name="filter_toDate" calendar2 data-ng-model="filter_toDate" 
 
            class="form-control" placeholder="mm/dd/yyyy" data-ng-minlength="10" /> 
 
    
 
     
 
          </div> 
 
          <br /> 
 

 
          <input type="submit" class="btn btn-primary btn-sm" value="GO" /> 
 

 
         </div>

Answer 2

這樣的代碼應該總是進入的鏈接功能指令。 $(document).ready(function() {/**/} ^ - 你根本不應該使用它。

一種方法可以是：

angular 
 
    .module('app', []) 
 
    .directive('thirdparty', jQueryDirective) 
 

 

 
function jQueryDirective(){ 
 
    return { 
 
    restrict: 'E', 
 
    template: '<div id="foo"></div>', 
 
    link: function(scope, element, attrs){ 
 
     $(element).append('appended with jquery') 
 
    } 
 
    } 
 
} 
 

 

 
angular.bootstrap(document, ['app'])

#foo { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<thirdparty/>