Module: TimeRangeSelector

Author:

• Marco Lehmann <marco.lehmann (at) kiwigrid.com>

Copyright:

• Kiwigrid GmbH 2014-2016

Source:

• directives/time-range-selector.js, line 3

Examples

<div data-keta-time-range-selector
  data-ng-model="model"
  data-css-classes="cssClasses"
  data-current-locale="currentLocale"
  data-display-mode="displayMode"
  data-display-value="displayValue"
  data-element-identifier="elementIdentifier"
  data-enable-display-mode-switch="enableDisplayModeSwitch"
  data-enable-week-selection="enableWeekSelection"
  data-first-click="firstClick"
  data-first-day-of-week="firstDayOfWeek"
  data-labels="labels"
  data-maximum="maximum"
  data-max-range-length="maxRangeLength"
  data-minimum="minimum"
  data-min-range-length="minRangeLength"
  data-show-pager="showPager"
  data-show-jump-to-selection-button="showJumpToSelectionButton"
  data-show-jump-to-today-button="showJumpToTodayButton"
  data-show-select-button="showSelectButton"
  data-show-week-numbers="showWeekNumbers"
  data-years-after="yearsAfter"
  data-years-before="yearsBefore"></div>

angular.module('exampleApp', ['keta.directives.TimeRangeSelector'])
    .controller('ExampleController', function(
        $scope, ketaTimeRangeSelectorConstants, ketaTimeRangeSelectorMessageKeys
    ) {

        // current range to use
        $scope.model = new Date(2016, 3, 20, 9, 0, 0, 0);

        // css classes to use
        $scope.cssClasses = ketaTimeRangeSelectorConstants.CSS_CLASSES;

        // current locale to use
        $scope.currentLocale = 'de_DE';

        // display mode to use (@see ketaTimeRangeSelectorConstants.DISPLAY_MODE)
        $scope.displayMode = ketaTimeRangeSelectorConstants.DISPLAY_MODE.DAY;

        // display value to use
        $scope.displayValue = angular.copy($scope.model);

        // element identifier
        $scope.elementIdentifier = 'myTimeRangeSelector';

        // enable display mode switch
        $scope.enableDisplayModeSwitch = true;

        // enable week selection
        $scope.enableWeekSelection = true;

        // define first click flag
        $scope.firstClick = true;

        // define first day of week
        $scope.firstDayOfWeek = ketaTimeRangeSelectorConstants.DAY.SUNDAY;

        // define labels to use
        $scope.labels = TimeRangeSelectorMessageKeys;

        // define an optional maximum boundary
        $scope.maximum = moment($scope.now).add(30, 'days').toDate();

        // define an optional maximum range length in days or 0 to disable it
        $scope.maxRangeLength = 3;

        // define an optional minimum boundary
        $scope.minimum = moment($scope.now).subtract(30, 'days').toDate();

        // define an optional minimum range length in days or 0 to disable it
        $scope.minRangeLength = 3;

        // show display mode switcher
        $scope.showDisplayModeSwitcher = true;

        // show pager above
        $scope.showPager = true;

        // show jump to selection button under calendar sheet
        $scope.showJumpToSelectionButton = true;

        // show jump to today button under calendar sheet
        $scope.showJumpToTodayButton = true;

        // show select button under calendar sheet
        $scope.showSelectButton = true;

        // show week number row
        $scope.showWeekNumbers = true;

        // define number of years to show after current in year list
        $scope.yearsAfter = 4;

        // define number of years to show before current in year list
        $scope.yearsBefore = 4;

    });