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

使用angular-ui-bootstrap中由angular-ui团队编写的datepicker，你不需要jQuery，而且它都是Angular。

（尽量不要使用jQuery，因为Angular和jQuery都是重型库，几乎所有可用于Angular的东西都可用于jQuery，例如：datepicker）

Answer 2

＆＃13;

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);
    }
  }
});

＆＃13;

<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>

＆＃13;

在Angular JS中使用日期选择器的最快捷最简单的方法是什么？

2 个答案: