Angular 2 - Implement jQuery timepicker Plugin and update model -
current example - https://plnkr.co/edit/njkoap?p=preview
i'm trying add timepicker plugin https://weareoutman.github.io/clockpicker angular2 form , make update ng-model.
as can see when mouse enters input field shows datepicker control , allows time set in input box. doesn't update time in ngmodel. how new time value updated in ng-model?
i've been trying work days gratefully appreciated.
below code app code:
import {bootstrap, form_directives, host, component, directive, view, renderer, defaultvalueaccessor, ngcontrol, self, elementref, oninit } 'angular2/angular2' @directive({ selector: '[time-picker]' }) export class timepicker extends defaultvalueaccessor implements oninit { private element: elementref; constructor(@self() model: ngcontrol, element: elementref, renderer: renderer) { super(model, renderer, element); this.el = element; } public writevalue(value: any): void { console.log('writevalue'); $(this.el.nativeelement).clockpicker({ placement: 'top', align: 'left', placement: 'bottom', donetext: 'done', afterdone: function() { this.value = 'test'; value = 'test 2'; console.log("after done"); } }); } public oninit(): void { console.log('oninit') $(this.el.nativeelement).clockpicker({placement: 'top', placement: 'bottom', align: 'left', donetext: 'done' }); } } @component({ selector: 'app' }) @view({ template: ` <div> <h3>time:{{value}}</h3> <form> <input type="text" time-picker ng-control="value" [(ng-model)]="value" /> </form> </div> `, directives: [form_directives, timepicker] }) export class app { public value: date; constructor() { this.value = '14:32'; } } bootstrap(app); and index file:
<!doctype html> <html> <head> <title>angular2 example</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="https://code.angularjs.org/tools/traceur-runtime.js"></script> <script src="https://code.angularjs.org/tools/system.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="config.js"></script> <script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.dev.js"></script> <!-- jquery clockpicker plugin --> <script src="//cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.js"></script> <script> system.import('./app.ts'); </script> </head> <body> <app> loading... </app> </body> </html>
Comments
Post a Comment