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

Posted 2023-05-09

【中文标题】在 Angular JS 中使用日期选择器最快和最简单的方法是啥？

【英文标题】：What is the quickest and easiest way to use date picker in Angular JS?在 Angular JS 中使用日期选择器最快和最简单的方法是什么？

【发布时间】：2017-09-30 00:28:54

【问题描述】：

我是 AngularJS 的初学者并尝试使用日期选择器。我尝试使用基于纯 jquery UI 的日期选择器。但它没有按预期工作。那么有人会帮助我编写一些实现 Angular 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>

【参考方案1】：

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

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

【参考方案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>