Angular2 ClockPicker

Question

В настоящее время я изучаю все варианты ClockPicker для веб-приложения, работающего с Angular 2

Что-то вроде http://weareoutman.github.io/clockpicker/ для примера.

Я провел исследования, но все, кажется, не так легко настроить.

Кто-нибудь сталкивался с каким-нибудь хорошим решением?

Спасибо!

Answer 1

1-й шаг

Используйте угловой клиент ( https://github.com/angular/angular-cli) для создания нового проекта:

ng new clockpicker-example

2-й шаг

Установите необходимые пакеты:

npm install jquery --save-dev

npm install jquery --save-dev

npm install clockpicker --save-dev

npm install @types/clockpicker --save-dev

3-й шаг

Внутри.angular-cli.json:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/clockpicker/dist/bootstrap-clockpicker.min.css"
 ],
 "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/clockpicker/dist/bootstrap-clockpicker.min.js"
  ],

4-й шаг

создать файл с именем clockpicker.directive.ts

import {Directive, ElementRef, OnInit} from "@angular/core";
@Directive({
   selector: '[appClockPicker]'
})


export class ClockPickerDirective implements OnInit {
   constructor(private el: ElementRef) {}

   ngOnInit(): void {
     $(this.el.nativeElement).clockpicker({
       placement: 'bottom',
       align: 'left',
       donetext: 'Done',
       afterDone: () => {
         console.log('done');
       }
     });
   }
}

5-й шаг

внутри app.component.html:

<div class="input-group" appClockPicker>
  <input type="text" class="form-control" value="09:30">
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-time"></span>
  </span>
</div>

6-й шаг

внутри typings.d.ts добавлять:

declare var $: any;
declare var jQuery: any;