Frontend Helper DayPickerDirective

← zurück zur Übersicht

DayPickerDirective

Definition: [DayPickerDirective](Frontend Interface DayPickerDirective)
Modul: happyHour.directives.DayPickerDirective
Dateiname: components/directives/DayPickerDirective.js
Typ: Angular Direktive
Autor: Markus Thömmes

Abhängigkeiten

formatDays

Dient dem Formatieren der Ausgabe der Direktive

Funktionsweise

Beim Aufrufen der previousClicked-Funktion wird die result-Variable um 1 verringert, bis sie nurnoch 1 enthält (entspricht Montag). Ein weiterer Aufruf der Funktion führt zu einem Setzen der Variable auf 7 (Sonntag). Analog funktioniert die nextClicked-Funktion.

$scope.previousClicked = function() {
  if($scope.result > 1) {
    $scope.result--;
  }
  else {
    $scope.result = 7;
  }
};

$scope.nextClicked = function() {
  if($scope.result < 7) {
    $scope.result++;
  }
  else {
    $scope.result = 1;
  }
};

Gebunden werden diese Funktionen über Angular Direktiven im Template. Die Ausgabe erfolgt mithilfe des Tagesausgabefilters (formatDays).

<div ng-click="previousClicked()" class="col-1"><h4>&lt;</h4></div>
<div class="col-10"><h4>{{result | formatDays:true}}</h4></div>
<div ng-click="nextClicked()" class="col-1"><h4>&gt;</h4></div>

Ist noch kein Wert über das result-Attribut gesetzt, wird der aktuelle Tag als Standardwert angenommen. JavaScript arbeitet intern mit einer Tagesnummerierung von 0 (Sonntag) bis 6 (Samstag). Diese wird an dieser Stelle auf die in Deutschland gängige 1 (Montag) bis 7 (Sonntag) Nummerierung normalisiert.

if($scope.result === undefined) {
  $scope.result = new Date().getDay();
  if($scope.result === 0) {
    $scope.result = 7;
  }
}