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

Question

我是 AngularJS 的初学者，正在尝试使用日期选择器。我尝试使用基于普通 jquery UI 的日期选择器。但它没有按预期工作。那么有人会帮我编写一些实现 Angular js 最简单方法的代码吗？我尝试过使用 720kb Angular 日期选择器，我已按照说明进行操作，但没有任何反应，没有任何错误!

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 团队编写的，你不需要 jQuery，这都是 Angular 的。

(如果可能的话尽量不要使用 jQuery，因为 Angular 和 jQuery 都是重型库，并且几乎所有可用于 Angular 的东西都可用于 jQuery，例如:datepicker)