¿Cómo hacer Timepicker usando Angular UI Bootstrap?

En este artículo, veremos cómo hacer un menú desplegable usando el arranque de la interfaz de usuario angular.

Angular UI Bootstrap es un marco Angular JS creado por desarrolladores de Angular UI para proporcionar una mejor interfaz de usuario que se puede usar fácilmente.

<div uib-timepicker></div>

Descarga AngularUI desde el enlace:

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

Acercarse: 

  • Primero, agregue los scripts de arranque de la interfaz de usuario angular necesarios para su proyecto.

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

  • Cree un selector de tiempo con sus clases UIBootStrap que establecerán el aspecto de la interfaz de usuario para el selector de tiempo.
  • Ahora haga diferentes tipos de selectores de tiempo usando diferentes clases y ejecute el código.

Ejemplo:

HTML

<!DOCTYPE html>
<html ng-app="gfg">
  <head>
  
  <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('timepicker', function ($scope) {
        $scope.ismeridian = true;
        $scope.lcltime = new Date();
        $scope.hrs = 1;
        $scope.mnt = 1;
  
      });
    </script>
  
    <link href=
 "https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
          rel="stylesheet">
  
  </head>
  <body>
    <div ng-controller="timepicker">
  
      <!-- making a timepicker -->
      <div class="column">
  
         <div uib-timepicker ng-model="lcltime"
              ng-change="changed()" hour-step="hrs" 
              minute-step="mnt" show-meridian="ismeridian">
         </div>
  
           <pre class="alert alert-info">
           Local time: {{lcltime | date:'shortTime' }}
           </pre>
        </div>
      </div>
  </body>
</html>

Producción:

Referencia:https://angular-ui.github.io/bootstrap/#!#Timepicker

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *