Angular 2: Timepicker im Material Design

Wer seine Anwendungen mit Angular 2 im Material Design entwickelt, verwendet daf├╝r sehr wahrscheinlich Angular Material. Doch leider fehlt dort noch ein wichtige Komponente...

Erstellt in App-Engineering, Webentwicklung am

Wer seine Anwendungen mit Angular 2 im Material Design entwickelt, verwendet daf├╝r sehr wahrscheinlich Angular Material. Schlie├člich hat Angular Material hervorragende direkt einsatzbereite Komponenten, welche einem Angular-Entwickler das Handwerk stark erleichtern k├Ânnen.

Einer dieser Komponenten ist beispielsweise der Datepicker:

material design datepicker

In den Material Design Richtlinien gibt es Beispiele f├╝r einen Timepicker, welche bisher noch nicht offiziell in Angular Material umgesetzt wurden:

Material Design Timepicker

Praktischerweise existiert eine inoffizielle Umsetzung f├╝r das ├Ąltere Angular in Version 1 und so hat der Softwareentwickler Steve Dunlap diese auf Angular 5 portiert. Diese Umsetzung dient zwar lediglich als Beispiel und umfasst auch nur begrenzt Funktionen, weshalb sie nur bedingt f├╝r eigenen Projekten passt, dennoch haben wir uns diesen Code als Basis gesetzt und die Portierung f├╝r unsere Zwecke erweitert. So ist der Timepicker nun responsive, die Farbe kann selbst bestimmt werden, der Uhrzeiger ist animiert und der Quellcode l├Ąsst sich nun leichter in eigene Projekte einbinden.

Verwendung

wTime

<w-time color="primary" [(userTime)]="exportTime" revertLabel="Revert" submitLabel="Submit" (onRevert)="onRevert()" (onSubmit)="onSubmit($event)"></w-time>

Durch das HTML-Element w-time kann die Uhr direkt angezeigt werden, das Attribute userTime bindet die Uhrzeit an die Komponente:

public exportTime = {hour: 7, minute: 15, meriden: 'PM'};

Mit den Attributen revertLabel und submitLabel k├Ânnen die Beschriftungen der Buttons ├╝berschrieben werden.

Die Attribute (onRevert)="onRevert()" und (onSubmit)="onSubmit($event) f├╝hren die ├╝bergebene Funktion aus sobald auf einen der Buttons geklickt wird, so kann beispielsweise eine Snackbar ausgel├Âst werden:

public onRevert() {
  this.exportTime = {hour: 7, minute: 15, meriden: 'PM'};
  this.snackBar.open(`Revert time to ${this.exportTime.hour}:${this.exportTime.minute} ${this.exportTime.meriden}`, null, {
    duration: 500,
  });
}

public onSubmit(time) {
  this.snackBar.open(`Saved time ${this.exportTime.hour}:${this.exportTime.minute} ${this.exportTime.meriden}`, null, {
    duration: 500,
  });
}

Und so schaut es nun aus:

wMatTimepicker

Wie bei dem Datepicker existiert eine Komponente, welche ├Ąhnlich verwendet werden kann:

<w-mat-timepicker color="primary" [(userTime)]="exportTime"></w-mat-timepicker>

Mit einem Klick auf die Uhr ├Âffnet sich ein Dialog und die Uhr kann entsprechend ausgew├Ąhlt werden:

Mit den Demos kann auch direkt im Browser experimentiert werden.

Zukunft

Schon jetzt planen wir auch noch zuk├╝nftig einige Verbesserungen an den Timerpicker vorzunehmen. Unsere bisherigen ├änderungen in Form eines Pull Requests sind bei Steve Dunlap eingereicht, so kann er unsere Erweiterung in sein urspr├╝ngliches Projekt einflie├čen lassen und er oder andere Entwickler verbesserndiese weiter. F├╝r uns ist es ein sch├Ânes Beispiel f├╝r Open Source Software, alle profitieren :)

Wir hoffen das Modul wird euch eine Hilfe sein, viel Spa├č.

Nachtrag vim 04.01.2018

Inwischen wurde der Pullrequest angenommen und unsere Verbesserungen in das Haupt-Repository aufgenommen, daher solltest du bei Interesse an dem Modul dieses nun aus dem urspr├╝nglichen Repository beziehen und nicht mehr von unseremk Fork.

Newsletter

Melde dich f├╝r unseren Newsletter an

Impressum

JumpLink network logo

Angaben gem. ┬ž 5 TMG

Betreiber und Kontakt
Pascal Garber
Kasernenstra├če 8
27472 Cuxhaven DE

Telefon
+49 152 54 09 01 89
Fax
+49 4721┬ş 664319
E-Mail
info@jumplink.eu
USt-IdNr.
DE277453808

Verantwortliche/r i.S.d. ┬ž 55 Abs. 2 RStV
Pascal Garber, Bei der Kirche 12, 27476 Cuxhaven
JumpLink

JumpLink ist ein Netzwerk aus selbstst├Ąndigen Designern und Programmierern.

Datenschutz
Die Datenschutzerkl├Ąrung findest Du unter https://www.jumplink.eu/privacy

Online-Streitbeilegung gem├Ą├č Art. 14 Abs. 1 ODR-VO
Die Europ├Ąische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: https://ec.europa.eu/consumers/odr/.
Wir sind zur Teilnahme an einem Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle weder verpflichtet noch bereit.

Mitglied der Initiative "Fairness im Handel".
Informationen zur Initiative: fairness-im-handel.de