Angular JSで日付ピッカーを使用する最も簡単で簡単な方法は何ですか？

Question

私はAngularJSの初心者で、日付ピッカーを使用しようとしています。私はプレーンjqueryのUIベースの日付ピッカーを使用しようとしました。しかし、期待どおりに動作していません。だから誰かが角度のあるjsを達成する最も簡単な方法であるいくつかのコードで私を助けますか？私は720kbの角度の日付ピッカーを使用して試して、私は指示に従っていると何もエラーなし何も起こらない！

app.js：

// Included in dependency injection. 
let app = angular.module('mainApp', [ 
    '720kb.datepicker', 'ngRoute', 'fetchModule' ]); 

main.htmlとのページ：

// Added stylesheet 
<!-- Angular Datepicker --> 
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.17/angular-datepicker.min.css"> 
// and the js file at the end of the main page. 
<!-- Angular Date Picker --> 
<script type="text/javascript" 
    src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.17/angular-datepicker.min.js"> 
</script> 

テンプレート：

// This is in the template that loads into view 
<datepicker> 
    <input ng-model="date" type="text"/> 
</datepicker> 

最後にmain.htmlを内のすべての.jsの順序を確認する：

<!-- jQuery --> 
<script src="/assets/vendor/jquery/jquery.min.js"></script> 
<!-- Bootstrap Core JavaScript --> 
<script src="/assets/vendor/bootstrap/bootstrap.min.js"></script> 
<!-- Angular --> 
<script src="/app/angular.min.js"></script> 
<!-- Angular Date Picker --> 
<script type="text/javascript" 
    src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.17/angular-datepicker.min.js"> 
</script> 
<!-- Angular Router --> 
<script src="/app/angular-route.min.js"></script> 

<!-- Angular App --> 
<script src="/app/app.js"></script> 
<!-- Fetch Module --> 
<script src="/app/fetch/fetchModule.js"></script> 
<script src="/app/fetch/controllers.js"></script> 

Answer 1

angle-uiチームによって書かれたangular-ui-bootstrapのdatepickerを使用し、それにjQueryは必要ありません。すべてAngularです。

（両方の角度& jQueryの重いライブラリであるため、可能な場合にはjQueryを使用しないようにしてみて、例えば、jQueryのために利用可能である角度で使用可能なほとんどすべてがあります。日付ピッカー）

Answer 2

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>  
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<div id="main_continer" ng-app="myDate"> 
 
    <input type="text" ng-model="datePicker" datepicker /> 
 
</div>