如何使用Angular UI Bootstrap制作Datepicker

在这篇文章中，我们将看到如何使用Angular UI Bootstrap制作Datepicker。Angular UI Bootstrap是一个Angular JS框架，由Angular UI开发者创建，用于提供更好的UI，可以轻松使用。

语法:

<div uib-datepicker></div>

从链接中下载AngularUI：。

https://angular-ui.github.io/bootstrap

步骤:

首先，添加你的项目所需的Angular UI bootstrap脚本。

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js”></script>
<script src=”https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js”></script>

用UIBootStrap类制作日期选择器，它将为日期选择器设置UI外观。
现在使用不同的类制作不同类型的日期选择器并运行代码。

示例:

<!DOCTYPE html>
<html ng-app="gfg">
  <head>
  
    <!-- Adding CDN scripts required for our page -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js">
    </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js">
    </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js">
    </script>
    <script src=
"https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js">
    </script>
  
    <script>
      // Adding Modules
      angular.module('gfg', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
      angular.module('gfg').controller('Datepicker', function ($scope) {
        });
    </script>
    <link href=
"https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
          rel="stylesheet">
  </head>
  <body>
    <div ng-controller="Datepicker">
  
      <!-- Making a datepicker -->
      <div uib-datepicker ng-model="date" 
           class="well well-sm" 
           datepicker-options="options">
      </div>
    </div>
  </body>
</html>

输出:

如何使用Angular UI Bootstrap制作Datepicker？