Module: DatePicker

Author:

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

Copyright:

• Kiwigrid GmbH 2014-2016

Source:

• directives/date-picker.js, line 3

Examples

<div data-keta-date-picker
  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-first-day-of-week="firstDayOfWeek"
  data-labels="labels"
  data-minimum="minimum"
  data-maximum="maximum"
  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.DatePicker'])
    .controller('ExampleController', function($scope, ketaDatePickerConstants, ketaDatePickerMessageKeys) {

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

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

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

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

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

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

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

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

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

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

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

        // 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;

    });