Jquery datepicker UI

こんにちは私はこのDate/Calendar Jquery UIをAngularjs（初心者）で利用するのに苦労しています。 UIウィジェットが表示されないと私は取得していますエラーメッセージは次のとおりです。Jquery datepicker UI

例外TypeError：elem.datepicker私はこの

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/cupertino/jquery-ui.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

これは、jQueryのにリンクされている機能

ではありません私のHTMLビュー：

<div ng-controller="DateCtrl"> 
    <h1> Date: {{date | date:"dd/MM/yyyy"}}</h1> 
    <input type="text" ng-model="date" datepicker /> 
</div>

これは私のコントローラとディレクティブです：

.controller('DateCtrl', function($scope) { 
    $scope.date = new Date(); 
}) 
.directive('datepicker', function() { 
    return { 
     restrict: 'A', 
     require : 'ngModel', 
     link : function (scope, elem, attrs, ngModelCtrl) { 
      elem.datepicker({ 
       dateFormat:'dd/mm/yy', 
       onSelect: function (date) { 
        ngModelCtrl.$setViewValue(date); 
        scope.$apply(); 
       } 
      }); 
     } 
    } 
});

出典

2016-05-21 A Allen

、あなたはAngularUIの日付ピッカーを使用して検討している（jqueryUIが角度のために建て）https://github.com/angular-ui/ui -日付 – haxxxton

は私が私のためにあなたのコードとその作業をコピーし、以下：

正しい順序で確認するスクリプトを作成します。

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/cupertino/jquery-ui.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
<script src="lib/angular.min.js"></script> 
<script src="app.js"></script>

マイapp.js：別として

// Where 'app' is whatever you're using to define ng-app 
// e.g. <body ng-app="app"> 
var app = angular.module('app', []); 

app.controller('DateCtrl', function($scope) { 
    $scope.date = new Date(); 
}); 

app.directive('datepicker', function() { 
    return { 
     restrict: 'A', 
     require : 'ngModel', 
     link : function (scope, elem, attrs, ngModelCtrl) { 
      elem.datepicker({ 
       dateFormat:'dd/mm/yy', 
       onSelect: function (date) { 
        ngModelCtrl.$setViewValue(date); 
        scope.$apply(); 
       } 
      }); 
     } 
    } 
});

私は、UI Bootstrapを角で使用する方が簡単かもしれないことをお勧めします。あなたのディレクティブに必要な

出典

2016-05-21 01:39:26

リトル変更：提案ではなく、答えとして

.directive("datepicker", function() { 
     return { 
     restrict: "A", 
     require: "ngModel", 
     link: function (scope, elem, attrs, ngModelCtrl) { 
      var updateModel = function (date) { 
      scope.$apply(function() { 
       ngModelCtrl.$setViewValue(date); 
      }); 
      }; 
      var options = { 
      dateFormat: "dd/mm/yy", 
      onSelect: function (date) { 
       updateModel(date); 
      } 
      }; 
      elem.datepicker(options); 
     } 
     } 
    });

出典

2016-05-21 03:36:12 ihemant360

答えて

関連する問題