diff options
author | 2017-03-08 12:03:21 +0530 | |
---|---|---|
committer | 2017-03-08 12:03:49 +0530 | |
commit | 6e43997c78814268bfea02298eb77ee49d83e7d8 (patch) | |
tree | ff72155f5b22da3cef95df0b5d5ae1861efdb3a9 /vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/closure/datepicker/datepicker.js | |
parent | 80b299e8c4f290e3b16f35eea922cac989b6e767 (diff) |
vnf mrket place refactor code
IssueId : CLIENT-4
Change-Id: If4ae825f9096aa6b2d7e9d017e93006b788a9b88
Signed-off-by: seshukm <seshu.kumar.m@huawei.com>
Diffstat (limited to 'vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/closure/datepicker/datepicker.js')
-rw-r--r-- | vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/closure/datepicker/datepicker.js | 3049 |
1 files changed, 0 insertions, 3049 deletions
diff --git a/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/closure/datepicker/datepicker.js b/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/closure/datepicker/datepicker.js deleted file mode 100644 index 8cc894ac..00000000 --- a/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/closure/datepicker/datepicker.js +++ /dev/null @@ -1,3049 +0,0 @@ -/*! - * Angular Material Design - * https://github.com/angular/material - * @license MIT - * v1.1.3 - */ -goog.provide('ngmaterial.components.datepicker'); -goog.require('ngmaterial.components.icon'); -goog.require('ngmaterial.components.virtualRepeat'); -goog.require('ngmaterial.core'); -/** - * @ngdoc module - * @name material.components.datepicker - * @description Module for the datepicker component. - */ - -angular.module('material.components.datepicker', [ - 'material.core', - 'material.components.icon', - 'material.components.virtualRepeat' -]); - -(function() { - 'use strict'; - - /** - * @ngdoc directive - * @name mdCalendar - * @module material.components.datepicker - * - * @param {Date} ng-model The component's model. Should be a Date object. - * @param {Date=} md-min-date Expression representing the minimum date. - * @param {Date=} md-max-date Expression representing the maximum date. - * @param {(function(Date): boolean)=} md-date-filter Function expecting a date and returning a boolean whether it can be selected or not. - * - * @description - * `<md-calendar>` is a component that renders a calendar that can be used to select a date. - * It is a part of the `<md-datepicker` pane, however it can also be used on it's own. - * - * @usage - * - * <hljs lang="html"> - * <md-calendar ng-model="birthday"></md-calendar> - * </hljs> - */ - CalendarCtrl['$inject'] = ["$element", "$scope", "$$mdDateUtil", "$mdUtil", "$mdConstant", "$mdTheming", "$$rAF", "$attrs", "$mdDateLocale"]; - angular.module('material.components.datepicker') - .directive('mdCalendar', calendarDirective); - - // POST RELEASE - // TODO(jelbourn): Mac Cmd + left / right == Home / End - // TODO(jelbourn): Refactor month element creation to use cloneNode (performance). - // TODO(jelbourn): Define virtual scrolling constants (compactness) users can override. - // TODO(jelbourn): Animated month transition on ng-model change (virtual-repeat) - // TODO(jelbourn): Scroll snapping (virtual repeat) - // TODO(jelbourn): Remove superfluous row from short months (virtual-repeat) - // TODO(jelbourn): Month headers stick to top when scrolling. - // TODO(jelbourn): Previous month opacity is lowered when partially scrolled out of view. - // TODO(jelbourn): Support md-calendar standalone on a page (as a tabstop w/ aria-live - // announcement and key handling). - // Read-only calendar (not just date-picker). - - function calendarDirective() { - return { - template: function(tElement, tAttr) { - // TODO(crisbeto): This is a workaround that allows the calendar to work, without - // a datepicker, until issue #8585 gets resolved. It can safely be removed - // afterwards. This ensures that the virtual repeater scrolls to the proper place on load by - // deferring the execution until the next digest. It's necessary only if the calendar is used - // without a datepicker, otherwise it's already wrapped in an ngIf. - var extraAttrs = tAttr.hasOwnProperty('ngIf') ? '' : 'ng-if="calendarCtrl.isInitialized"'; - var template = '' + - '<div ng-switch="calendarCtrl.currentView" ' + extraAttrs + '>' + - '<md-calendar-year ng-switch-when="year"></md-calendar-year>' + - '<md-calendar-month ng-switch-default></md-calendar-month>' + - '</div>'; - - return template; - }, - scope: { - minDate: '=mdMinDate', - maxDate: '=mdMaxDate', - dateFilter: '=mdDateFilter', - _currentView: '@mdCurrentView' - }, - require: ['ngModel', 'mdCalendar'], - controller: CalendarCtrl, - controllerAs: 'calendarCtrl', - bindToController: true, - link: function(scope, element, attrs, controllers) { - var ngModelCtrl = controllers[0]; - var mdCalendarCtrl = controllers[1]; - mdCalendarCtrl.configureNgModel(ngModelCtrl); - } - }; - } - - /** - * Occasionally the hideVerticalScrollbar method might read an element's - * width as 0, because it hasn't been laid out yet. This value will be used - * as a fallback, in order to prevent scenarios where the element's width - * would otherwise have been set to 0. This value is the "usual" width of a - * calendar within a floating calendar pane. - */ - var FALLBACK_WIDTH = 340; - - /** Next identifier for calendar instance. */ - var nextUniqueId = 0; - - /** - * Controller for the mdCalendar component. - * ngInject @constructor - */ - function CalendarCtrl($element, $scope, $$mdDateUtil, $mdUtil, - $mdConstant, $mdTheming, $$rAF, $attrs, $mdDateLocale) { - - $mdTheming($element); - - /** @final {!angular.JQLite} */ - this.$element = $element; - - /** @final {!angular.Scope} */ - this.$scope = $scope; - - /** @final */ - this.dateUtil = $$mdDateUtil; - - /** @final */ - this.$mdUtil = $mdUtil; - - /** @final */ - this.keyCode = $mdConstant.KEY_CODE; - - /** @final */ - this.$$rAF = $$rAF; - - /** @final */ - this.$mdDateLocale = $mdDateLocale; - - /** @final {Date} */ - this.today = this.dateUtil.createDateAtMidnight(); - - /** @type {!angular.NgModelController} */ - this.ngModelCtrl = null; - - /** @type {String} Class applied to the selected date cell. */ - this.SELECTED_DATE_CLASS = 'md-calendar-selected-date'; - - /** @type {String} Class applied to the cell for today. */ - this.TODAY_CLASS = 'md-calendar-date-today'; - - /** @type {String} Class applied to the focused cell. */ - this.FOCUSED_DATE_CLASS = 'md-focus'; - - /** @final {number} Unique ID for this calendar instance. */ - this.id = nextUniqueId++; - - /** - * The date that is currently focused or showing in the calendar. This will initially be set - * to the ng-model value if set, otherwise to today. It will be updated as the user navigates - * to other months. The cell corresponding to the displayDate does not necesarily always have - * focus in the document (such as for cases when the user is scrolling the calendar). - * @type {Date} - */ - this.displayDate = null; - - /** - * The selected date. Keep track of this separately from the ng-model value so that we - * can know, when the ng-model value changes, what the previous value was before it's updated - * in the component's UI. - * - * @type {Date} - */ - this.selectedDate = null; - - /** - * The first date that can be rendered by the calendar. The default is taken - * from the mdDateLocale provider and is limited by the mdMinDate. - * @type {Date} - */ - this.firstRenderableDate = null; - - /** - * The last date that can be rendered by the calendar. The default comes - * from the mdDateLocale provider and is limited by the maxDate. - * @type {Date} - */ - this.lastRenderableDate = null; - - /** - * Used to toggle initialize the root element in the next digest. - * @type {Boolean} - */ - this.isInitialized = false; - - /** - * Cache for the width of the element without a scrollbar. Used to hide the scrollbar later on - * and to avoid extra reflows when switching between views. - * @type {Number} - */ - this.width = 0; - - /** - * Caches the width of the scrollbar in order to be used when hiding it and to avoid extra reflows. - * @type {Number} - */ - this.scrollbarWidth = 0; - - // Unless the user specifies so, the calendar should not be a tab stop. - // This is necessary because ngAria might add a tabindex to anything with an ng-model - // (based on whether or not the user has turned that particular feature on/off). - if (!$attrs.tabindex) { - $element.attr('tabindex', '-1'); - } - - var boundKeyHandler = angular.bind(this, this.handleKeyEvent); - - - - // If use the md-calendar directly in the body without datepicker, - // handleKeyEvent will disable other inputs on the page. - // So only apply the handleKeyEvent on the body when the md-calendar inside datepicker, - // otherwise apply on the calendar element only. - - var handleKeyElement; - if ($element.parent().hasClass('md-datepicker-calendar')) { - handleKeyElement = angular.element(document.body); - } else { - handleKeyElement = $element; - } - - // Bind the keydown handler to the body, in order to handle cases where the focused - // element gets removed from the DOM and stops propagating click events. - handleKeyElement.on('keydown', boundKeyHandler); - - $scope.$on('$destroy', function() { - handleKeyElement.off('keydown', boundKeyHandler); - }); - - // For Angular 1.4 and older, where there are no lifecycle hooks but bindings are pre-assigned, - // manually call the $onInit hook. - if (angular.version.major === 1 && angular.version.minor <= 4) { - this.$onInit(); - } - - } - - /** - * Angular Lifecycle hook for newer Angular versions. - * Bindings are not guaranteed to have been assigned in the controller, but they are in the $onInit hook. - */ - CalendarCtrl.prototype.$onInit = function() { - - /** - * The currently visible calendar view. Note the prefix on the scope value, - * which is necessary, because the datepicker seems to reset the real one value if the - * calendar is open, but the value on the datepicker's scope is empty. - * @type {String} - */ - this.currentView = this._currentView || 'month'; - - var dateLocale = this.$mdDateLocale; - - if (this.minDate && this.minDate > dateLocale.firstRenderableDate) { - this.firstRenderableDate = this.minDate; - } else { - this.firstRenderableDate = dateLocale.firstRenderableDate; - } - - if (this.maxDate && this.maxDate < dateLocale.lastRenderableDate) { - this.lastRenderableDate = this.maxDate; - } else { - this.lastRenderableDate = dateLocale.lastRenderableDate; - } - }; - - /** - * Sets up the controller's reference to ngModelController. - * @param {!angular.NgModelController} ngModelCtrl - */ - CalendarCtrl.prototype.configureNgModel = function(ngModelCtrl) { - var self = this; - - self.ngModelCtrl = ngModelCtrl; - - self.$mdUtil.nextTick(function() { - self.isInitialized = true; - }); - - ngModelCtrl.$render = function() { - var value = this.$viewValue; - - // Notify the child scopes of any changes. - self.$scope.$broadcast('md-calendar-parent-changed', value); - - // Set up the selectedDate if it hasn't been already. - if (!self.selectedDate) { - self.selectedDate = value; - } - - // Also set up the displayDate. - if (!self.displayDate) { - self.displayDate = self.selectedDate || self.today; - } - }; - }; - - /** - * Sets the ng-model value for the calendar and emits a change event. - * @param {Date} date - */ - CalendarCtrl.prototype.setNgModelValue = function(date) { - var value = this.dateUtil.createDateAtMidnight(date); - this.focus(value); - this.$scope.$emit('md-calendar-change', value); - this.ngModelCtrl.$setViewValue(value); - this.ngModelCtrl.$render(); - return value; - }; - - /** - * Sets the current view that should be visible in the calendar - * @param {string} newView View name to be set. - * @param {number|Date} time Date object or a timestamp for the new display date. - */ - CalendarCtrl.prototype.setCurrentView = function(newView, time) { - var self = this; - - self.$mdUtil.nextTick(function() { - self.currentView = newView; - - if (time) { - self.displayDate = angular.isDate(time) ? time : new Date(time); - } - }); - }; - - /** - * Focus the cell corresponding to the given date. - * @param {Date} date The date to be focused. - */ - CalendarCtrl.prototype.focus = function(date) { - if (this.dateUtil.isValidDate(date)) { - var previousFocus = this.$element[0].querySelector('.md-focus'); - if (previousFocus) { - previousFocus.classList.remove(this.FOCUSED_DATE_CLASS); - } - - var cellId = this.getDateId(date, this.currentView); - var cell = document.getElementById(cellId); - if (cell) { - cell.classList.add(this.FOCUSED_DATE_CLASS); - cell.focus(); - this.displayDate = date; - } - } else { - var rootElement = this.$element[0].querySelector('[ng-switch]'); - - if (rootElement) { - rootElement.focus(); - } - } - }; - - /** - * Normalizes the key event into an action name. The action will be broadcast - * to the child controllers. - * @param {KeyboardEvent} event - * @returns {String} The action that should be taken, or null if the key - * does not match a calendar shortcut. - */ - CalendarCtrl.prototype.getActionFromKeyEvent = function(event) { - var keyCode = this.keyCode; - - switch (event.which) { - case keyCode.ENTER: return 'select'; - - case keyCode.RIGHT_ARROW: return 'move-right'; - case keyCode.LEFT_ARROW: return 'move-left'; - - // TODO(crisbeto): Might want to reconsider using metaKey, because it maps - // to the "Windows" key on PC, which opens the start menu or resizes the browser. - case keyCode.DOWN_ARROW: return event.metaKey ? 'move-page-down' : 'move-row-down'; - case keyCode.UP_ARROW: return event.metaKey ? 'move-page-up' : 'move-row-up'; - - case keyCode.PAGE_DOWN: return 'move-page-down'; - case keyCode.PAGE_UP: return 'move-page-up'; - - case keyCode.HOME: return 'start'; - case keyCode.END: return 'end'; - - default: return null; - } - }; - - /** - * Handles a key event in the calendar with the appropriate action. The action will either - * be to select the focused date or to navigate to focus a new date. - * @param {KeyboardEvent} event - */ - CalendarCtrl.prototype.handleKeyEvent = function(event) { - var self = this; - - this.$scope.$apply(function() { - // Capture escape and emit back up so that a wrapping component - // (such as a date-picker) can decide to close. - if (event.which == self.keyCode.ESCAPE || event.which == self.keyCode.TAB) { - self.$scope.$emit('md-calendar-close'); - - if (event.which == self.keyCode.TAB) { - event.preventDefault(); - } - - return; - } - - // Broadcast the action that any child controllers should take. - var action = self.getActionFromKeyEvent(event); - if (action) { - event.preventDefault(); - event.stopPropagation(); - self.$scope.$broadcast('md-calendar-parent-action', action); - } - }); - }; - - /** - * Hides the vertical scrollbar on the calendar scroller of a child controller by - * setting the width on the calendar scroller and the `overflow: hidden` wrapper - * around the scroller, and then setting a padding-right on the scroller equal - * to the width of the browser's scrollbar. - * - * This will cause a reflow. - * - * @param {object} childCtrl The child controller whose scrollbar should be hidden. - */ - CalendarCtrl.prototype.hideVerticalScrollbar = function(childCtrl) { - var self = this; - var element = childCtrl.$element[0]; - var scrollMask = element.querySelector('.md-calendar-scroll-mask'); - - if (self.width > 0) { - setWidth(); - } else { - self.$$rAF(function() { - var scroller = childCtrl.calendarScroller; - - self.scrollbarWidth = scroller.offsetWidth - scroller.clientWidth; - self.width = element.querySelector('table').offsetWidth; - setWidth(); - }); - } - - function setWidth() { - var width = self.width || FALLBACK_WIDTH; - var scrollbarWidth = self.scrollbarWidth; - var scroller = childCtrl.calendarScroller; - - scrollMask.style.width = width + 'px'; - scroller.style.width = (width + scrollbarWidth) + 'px'; - scroller.style.paddingRight = scrollbarWidth + 'px'; - } - }; - - /** - * Gets an identifier for a date unique to the calendar instance for internal - * purposes. Not to be displayed. - * @param {Date} date The date for which the id is being generated - * @param {string} namespace Namespace for the id. (month, year etc.) - * @returns {string} - */ - CalendarCtrl.prototype.getDateId = function(date, namespace) { - if (!namespace) { - throw new Error('A namespace for the date id has to be specified.'); - } - - return [ - 'md', - this.id, - namespace, - date.getFullYear(), - date.getMonth(), - date.getDate() - ].join('-'); - }; - - /** - * Util to trigger an extra digest on a parent scope, in order to to ensure that - * any child virtual repeaters have updated. This is necessary, because the virtual - * repeater doesn't update the $index the first time around since the content isn't - * in place yet. The case, in which this is an issue, is when the repeater has less - * than a page of content (e.g. a month or year view has a min or max date). - */ - CalendarCtrl.prototype.updateVirtualRepeat = function() { - var scope = this.$scope; - var virtualRepeatResizeListener = scope.$on('$md-resize-enable', function() { - if (!scope.$$phase) { - scope.$apply(); - } - - virtualRepeatResizeListener(); - }); - }; -})(); - -(function() { - 'use strict'; - - CalendarMonthCtrl['$inject'] = ["$element", "$scope", "$animate", "$q", "$$mdDateUtil", "$mdDateLocale"]; - angular.module('material.components.datepicker') - .directive('mdCalendarMonth', calendarDirective); - - /** - * Height of one calendar month tbody. This must be made known to the virtual-repeat and is - * subsequently used for scrolling to specific months. - */ - var TBODY_HEIGHT = 265; - - /** - * Height of a calendar month with a single row. This is needed to calculate the offset for - * rendering an extra month in virtual-repeat that only contains one row. - */ - var TBODY_SINGLE_ROW_HEIGHT = 45; - - /** Private directive that represents a list of months inside the calendar. */ - function calendarDirective() { - return { - template: - '<table aria-hidden="true" class="md-calendar-day-header"><thead></thead></table>' + - '<div class="md-calendar-scroll-mask">' + - '<md-virtual-repeat-container class="md-calendar-scroll-container" ' + - 'md-offset-size="' + (TBODY_SINGLE_ROW_HEIGHT - TBODY_HEIGHT) + '">' + - '<table role="grid" tabindex="0" class="md-calendar" aria-readonly="true">' + - '<tbody ' + - 'md-calendar-month-body ' + - 'role="rowgroup" ' + - 'md-virtual-repeat="i in monthCtrl.items" ' + - 'md-month-offset="$index" ' + - 'class="md-calendar-month" ' + - 'md-start-index="monthCtrl.getSelectedMonthIndex()" ' + - 'md-item-size="' + TBODY_HEIGHT + '">' + - - // The <tr> ensures that the <tbody> will always have the - // proper height, even if it's empty. If it's content is - // compiled, the <tr> will be overwritten. - '<tr aria-hidden="true" style="height:' + TBODY_HEIGHT + 'px;"></tr>' + - '</tbody>' + - '</table>' + - '</md-virtual-repeat-container>' + - '</div>', - require: ['^^mdCalendar', 'mdCalendarMonth'], - controller: CalendarMonthCtrl, - controllerAs: 'monthCtrl', - bindToController: true, - link: function(scope, element, attrs, controllers) { - var calendarCtrl = controllers[0]; - var monthCtrl = controllers[1]; - monthCtrl.initialize(calendarCtrl); - } - }; - } - - /** - * Controller for the calendar month component. - * ngInject @constructor - */ - function CalendarMonthCtrl($element, $scope, $animate, $q, - $$mdDateUtil, $mdDateLocale) { - - /** @final {!angular.JQLite} */ - this.$element = $element; - - /** @final {!angular.Scope} */ - this.$scope = $scope; - - /** @final {!angular.$animate} */ - this.$animate = $animate; - - /** @final {!angular.$q} */ - this.$q = $q; - - /** @final */ - this.dateUtil = $$mdDateUtil; - - /** @final */ - this.dateLocale = $mdDateLocale; - - /** @final {HTMLElement} */ - this.calendarScroller = $element[0].querySelector('.md-virtual-repeat-scroller'); - - /** @type {boolean} */ - this.isInitialized = false; - - /** @type {boolean} */ - this.isMonthTransitionInProgress = false; - - var self = this; - - /** - * Handles a click event on a date cell. - * Created here so that every cell can use the same function instance. - * @this {HTMLTableCellElement} The cell that was clicked. - */ - this.cellClickHandler = function() { - var timestamp = $$mdDateUtil.getTimestampFromNode(this); - self.$scope.$apply(function() { - self.calendarCtrl.setNgModelValue(timestamp); - }); - }; - - /** - * Handles click events on the month headers. Switches - * the calendar to the year view. - * @this {HTMLTableCellElement} The cell that was clicked. - */ - this.headerClickHandler = function() { - self.calendarCtrl.setCurrentView('year', $$mdDateUtil.getTimestampFromNode(this)); - }; - } - - /*** Initialization ***/ - - /** - * Initialize the controller by saving a reference to the calendar and - * setting up the object that will be iterated by the virtual repeater. - */ - CalendarMonthCtrl.prototype.initialize = function(calendarCtrl) { - /** - * Dummy array-like object for virtual-repeat to iterate over. The length is the total - * number of months that can be viewed. We add 2 months: one to include the current month - * and one for the last dummy month. - * - * This is shorter than ideal because of a (potential) Firefox bug - * https://bugzilla.mozilla.org/show_bug.cgi?id=1181658. - */ - - this.items = { - length: this.dateUtil.getMonthDistance( - calendarCtrl.firstRenderableDate, - calendarCtrl.lastRenderableDate - ) + 2 - }; - - this.calendarCtrl = calendarCtrl; - this.attachScopeListeners(); - calendarCtrl.updateVirtualRepeat(); - - // Fire the initial render, since we might have missed it the first time it fired. - calendarCtrl.ngModelCtrl && calendarCtrl.ngModelCtrl.$render(); - }; - - /** - * Gets the "index" of the currently selected date as it would be in the virtual-repeat. - * @returns {number} - */ - CalendarMonthCtrl.prototype.getSelectedMonthIndex = function() { - var calendarCtrl = this.calendarCtrl; - - return this.dateUtil.getMonthDistance( - calendarCtrl.firstRenderableDate, - calendarCtrl.displayDate || calendarCtrl.selectedDate || calendarCtrl.today - ); - }; - - /** - * Change the selected date in the calendar (ngModel value has already been changed). - * @param {Date} date - */ - CalendarMonthCtrl.prototype.changeSelectedDate = function(date) { - var self = this; - var calendarCtrl = self.calendarCtrl; - var previousSelectedDate = calendarCtrl.selectedDate; - calendarCtrl.selectedDate = date; - - this.changeDisplayDate(date).then(function() { - var selectedDateClass = calendarCtrl.SELECTED_DATE_CLASS; - var namespace = 'month'; - - // Remove the selected class from the previously selected date, if any. - if (previousSelectedDate) { - var prevDateCell = document.getElementById(calendarCtrl.getDateId(previousSelectedDate, namespace)); - if (prevDateCell) { - prevDateCell.classList.remove(selectedDateClass); - prevDateCell.setAttribute('aria-selected', 'false'); - } - } - - // Apply the select class to the new selected date if it is set. - if (date) { - var dateCell = document.getElementById(calendarCtrl.getDateId(date, namespace)); - if (dateCell) { - dateCell.classList.add(selectedDateClass); - dateCell.setAttribute('aria-selected', 'true'); - } - } - }); - }; - - /** - * Change the date that is being shown in the calendar. If the given date is in a different - * month, the displayed month will be transitioned. - * @param {Date} date - */ - CalendarMonthCtrl.prototype.changeDisplayDate = function(date) { - // Initialization is deferred until this function is called because we want to reflect - // the starting value of ngModel. - if (!this.isInitialized) { - this.buildWeekHeader(); - this.calendarCtrl.hideVerticalScrollbar(this); - this.isInitialized = true; - return this.$q.when(); - } - - // If trying to show an invalid date or a transition is in progress, do nothing. - if (!this.dateUtil.isValidDate(date) || this.isMonthTransitionInProgress) { - return this.$q.when(); - } - - this.isMonthTransitionInProgress = true; - var animationPromise = this.animateDateChange(date); - - this.calendarCtrl.displayDate = date; - - var self = this; - animationPromise.then(function() { - self.isMonthTransitionInProgress = false; - }); - - return animationPromise; - }; - - /** - * Animates the transition from the calendar's current month to the given month. - * @param {Date} date - * @returns {angular.$q.Promise} The animation promise. - */ - CalendarMonthCtrl.prototype.animateDateChange = function(date) { - if (this.dateUtil.isValidDate(date)) { - var monthDistance = this.dateUtil.getMonthDistance(this.calendarCtrl.firstRenderableDate, date); - this.calendarScroller.scrollTop = monthDistance * TBODY_HEIGHT; - } - - return this.$q.when(); - }; - - /** - * Builds and appends a day-of-the-week header to the calendar. - * This should only need to be called once during initialization. - */ - CalendarMonthCtrl.prototype.buildWeekHeader = function() { - var firstDayOfWeek = this.dateLocale.firstDayOfWeek; - var shortDays = this.dateLocale.shortDays; - - var row = document.createElement('tr'); - for (var i = 0; i < 7; i++) { - var th = document.createElement('th'); - th.textContent = shortDays[(i + firstDayOfWeek) % 7]; - row.appendChild(th); - } - - this.$element.find('thead').append(row); - }; - - /** - * Attaches listeners for the scope events that are broadcast by the calendar. - */ - CalendarMonthCtrl.prototype.attachScopeListeners = function() { - var self = this; - - self.$scope.$on('md-calendar-parent-changed', function(event, value) { - self.changeSelectedDate(value); - }); - - self.$scope.$on('md-calendar-parent-action', angular.bind(this, this.handleKeyEvent)); - }; - - /** - * Handles the month-specific keyboard interactions. - * @param {Object} event Scope event object passed by the calendar. - * @param {String} action Action, corresponding to the key that was pressed. - */ - CalendarMonthCtrl.prototype.handleKeyEvent = function(event, action) { - var calendarCtrl = this.calendarCtrl; - var displayDate = calendarCtrl.displayDate; - - if (action === 'select') { - calendarCtrl.setNgModelValue(displayDate); - } else { - var date = null; - var dateUtil = this.dateUtil; - - switch (action) { - case 'move-right': date = dateUtil.incrementDays(displayDate, 1); break; - case 'move-left': date = dateUtil.incrementDays(displayDate, -1); break; - - case 'move-page-down': date = dateUtil.incrementMonths(displayDate, 1); break; - case 'move-page-up': date = dateUtil.incrementMonths(displayDate, -1); break; - - case 'move-row-down': date = dateUtil.incrementDays(displayDate, 7); break; - case 'move-row-up': date = dateUtil.incrementDays(displayDate, -7); break; - - case 'start': date = dateUtil.getFirstDateOfMonth(displayDate); break; - case 'end': date = dateUtil.getLastDateOfMonth(displayDate); break; - } - - if (date) { - date = this.dateUtil.clampDate(date, calendarCtrl.minDate, calendarCtrl.maxDate); - - this.changeDisplayDate(date).then(function() { - calendarCtrl.focus(date); - }); - } - } - }; -})(); - -(function() { - 'use strict'; - - mdCalendarMonthBodyDirective['$inject'] = ["$compile", "$$mdSvgRegistry"]; - CalendarMonthBodyCtrl['$inject'] = ["$element", "$$mdDateUtil", "$mdDateLocale"]; - angular.module('material.components.datepicker') - .directive('mdCalendarMonthBody', mdCalendarMonthBodyDirective); - - /** - * Private directive consumed by md-calendar-month. Having this directive lets the calender use - * md-virtual-repeat and also cleanly separates the month DOM construction functions from - * the rest of the calendar controller logic. - * ngInject - */ - function mdCalendarMonthBodyDirective($compile, $$mdSvgRegistry) { - var ARROW_ICON = $compile('<md-icon md-svg-src="' + - $$mdSvgRegistry.mdTabsArrow + '"></md-icon>')({})[0]; - - return { - require: ['^^mdCalendar', '^^mdCalendarMonth', 'mdCalendarMonthBody'], - scope: { offset: '=mdMonthOffset' }, - controller: CalendarMonthBodyCtrl, - controllerAs: 'mdMonthBodyCtrl', - bindToController: true, - link: function(scope, element, attrs, controllers) { - var calendarCtrl = controllers[0]; - var monthCtrl = controllers[1]; - var monthBodyCtrl = controllers[2]; - - monthBodyCtrl.calendarCtrl = calendarCtrl; - monthBodyCtrl.monthCtrl = monthCtrl; - monthBodyCtrl.arrowIcon = ARROW_ICON.cloneNode(true); - - // The virtual-repeat re-uses the same DOM elements, so there are only a limited number - // of repeated items that are linked, and then those elements have their bindings updated. - // Since the months are not generated by bindings, we simply regenerate the entire thing - // when the binding (offset) changes. - scope.$watch(function() { return monthBodyCtrl.offset; }, function(offset) { - if (angular.isNumber(offset)) { - monthBodyCtrl.generateContent(); - } - }); - } - }; - } - - /** - * Controller for a single calendar month. - * ngInject @constructor - */ - function CalendarMonthBodyCtrl($element, $$mdDateUtil, $mdDateLocale) { - /** @final {!angular.JQLite} */ - this.$element = $element; - - /** @final */ - this.dateUtil = $$mdDateUtil; - - /** @final */ - this.dateLocale = $mdDateLocale; - - /** @type {Object} Reference to the month view. */ - this.monthCtrl = null; - - /** @type {Object} Reference to the calendar. */ - this.calendarCtrl = null; - - /** - * Number of months from the start of the month "items" that the currently rendered month - * occurs. Set via angular data binding. - * @type {number} - */ - this.offset = null; - - /** - * Date cell to focus after appending the month to the document. - * @type {HTMLElement} - */ - this.focusAfterAppend = null; - } - - /** Generate and append the content for this month to the directive element. */ - CalendarMonthBodyCtrl.prototype.generateContent = function() { - var date = this.dateUtil.incrementMonths(this.calendarCtrl.firstRenderableDate, this.offset); - - this.$element - .empty() - .append(this.buildCalendarForMonth(date)); - - if (this.focusAfterAppend) { - this.focusAfterAppend.classList.add(this.calendarCtrl.FOCUSED_DATE_CLASS); - this.focusAfterAppend.focus(); - this.focusAfterAppend = null; - } - }; - - /** - * Creates a single cell to contain a date in the calendar with all appropriate - * attributes and classes added. If a date is given, the cell content will be set - * based on the date. - * @param {Date=} opt_date - * @returns {HTMLElement} - */ - CalendarMonthBodyCtrl.prototype.buildDateCell = function(opt_date) { - var monthCtrl = this.monthCtrl; - var calendarCtrl = this.calendarCtrl; - - // TODO(jelbourn): cloneNode is likely a faster way of doing this. - var cell = document.createElement('td'); - cell.tabIndex = -1; - cell.classList.add('md-calendar-date'); - cell.setAttribute('role', 'gridcell'); - - if (opt_date) { - cell.setAttribute('tabindex', '-1'); - cell.setAttribute('aria-label', this.dateLocale.longDateFormatter(opt_date)); - cell.id = calendarCtrl.getDateId(opt_date, 'month'); - - // Use `data-timestamp` attribute because IE10 does not support the `dataset` property. - cell.setAttribute('data-timestamp', opt_date.getTime()); - - // TODO(jelourn): Doing these comparisons for class addition during generation might be slow. - // It may be better to finish the construction and then query the node and add the class. - if (this.dateUtil.isSameDay(opt_date, calendarCtrl.today)) { - cell.classList.add(calendarCtrl.TODAY_CLASS); - } - - if (this.dateUtil.isValidDate(calendarCtrl.selectedDate) && - this.dateUtil.isSameDay(opt_date, calendarCtrl.selectedDate)) { - cell.classList.add(calendarCtrl.SELECTED_DATE_CLASS); - cell.setAttribute('aria-selected', 'true'); - } - - var cellText = this.dateLocale.dates[opt_date.getDate()]; - - if (this.isDateEnabled(opt_date)) { - // Add a indicator for select, hover, and focus states. - var selectionIndicator = document.createElement('span'); - selectionIndicator.classList.add('md-calendar-date-selection-indicator'); - selectionIndicator.textContent = cellText; - cell.appendChild(selectionIndicator); - cell.addEventListener('click', monthCtrl.cellClickHandler); - - if (calendarCtrl.displayDate && this.dateUtil.isSameDay(opt_date, calendarCtrl.displayDate)) { - this.focusAfterAppend = cell; - } - } else { - cell.classList.add('md-calendar-date-disabled'); - cell.textContent = cellText; - } - } - - return cell; - }; - - /** - * Check whether date is in range and enabled - * @param {Date=} opt_date - * @return {boolean} Whether the date is enabled. - */ - CalendarMonthBodyCtrl.prototype.isDateEnabled = function(opt_date) { - return this.dateUtil.isDateWithinRange(opt_date, - this.calendarCtrl.minDate, this.calendarCtrl.maxDate) && - (!angular.isFunction(this.calendarCtrl.dateFilter) - || this.calendarCtrl.dateFilter(opt_date)); - }; - - /** - * Builds a `tr` element for the calendar grid. - * @param rowNumber The week number within the month. - * @returns {HTMLElement} - */ - CalendarMonthBodyCtrl.prototype.buildDateRow = function(rowNumber) { - var row = document.createElement('tr'); - row.setAttribute('role', 'row'); - - // Because of an NVDA bug (with Firefox), the row needs an aria-label in order - // to prevent the entire row being read aloud when the user moves between rows. - // See http://community.nvda-project.org/ticket/4643. - row.setAttribute('aria-label', this.dateLocale.weekNumberFormatter(rowNumber)); - - return row; - }; - - /** - * Builds the <tbody> content for the given date's month. - * @param {Date=} opt_dateInMonth - * @returns {DocumentFragment} A document fragment containing the <tr> elements. - */ - CalendarMonthBodyCtrl.prototype.buildCalendarForMonth = function(opt_dateInMonth) { - var date = this.dateUtil.isValidDate(opt_dateInMonth) ? opt_dateInMonth : new Date(); - - var firstDayOfMonth = this.dateUtil.getFirstDateOfMonth(date); - var firstDayOfTheWeek = this.getLocaleDay_(firstDayOfMonth); - var numberOfDaysInMonth = this.dateUtil.getNumberOfDaysInMonth(date); - - // Store rows for the month in a document fragment so that we can append them all at once. - var monthBody = document.createDocumentFragment(); - - var rowNumber = 1; - var row = this.buildDateRow(rowNumber); - monthBody.appendChild(row); - - // If this is the final month in the list of items, only the first week should render, - // so we should return immediately after the first row is complete and has been - // attached to the body. - var isFinalMonth = this.offset === this.monthCtrl.items.length - 1; - - // Add a label for the month. If the month starts on a Sun/Mon/Tues, the month label - // goes on a row above the first of the month. Otherwise, the month label takes up the first - // two cells of the first row. - var blankCellOffset = 0; - var monthLabelCell = document.createElement('td'); - var monthLabelCellContent = document.createElement('span'); - - monthLabelCellContent.textContent = this.dateLocale.monthHeaderFormatter(date); - monthLabelCell.appendChild(monthLabelCellContent); - monthLabelCell.classList.add('md-calendar-month-label'); - // If the entire month is after the max date, render the label as a disabled state. - if (this.calendarCtrl.maxDate && firstDayOfMonth > this.calendarCtrl.maxDate) { - monthLabelCell.classList.add('md-calendar-month-label-disabled'); - } else { - monthLabelCell.addEventListener('click', this.monthCtrl.headerClickHandler); - monthLabelCell.setAttribute('data-timestamp', firstDayOfMonth.getTime()); - monthLabelCell.setAttribute('aria-label', this.dateLocale.monthFormatter(date)); - monthLabelCell.appendChild(this.arrowIcon.cloneNode(true)); - } - - if (firstDayOfTheWeek <= 2) { - monthLabelCell.setAttribute('colspan', '7'); - - var monthLabelRow = this.buildDateRow(); - monthLabelRow.appendChild(monthLabelCell); - monthBody.insertBefore(monthLabelRow, row); - - if (isFinalMonth) { - return monthBody; - } - } else { - blankCellOffset = 3; - monthLabelCell.setAttribute('colspan', '3'); - row.appendChild(monthLabelCell); - } - - // Add a blank cell for each day of the week that occurs before the first of the month. - // For example, if the first day of the month is a Tuesday, add blank cells for Sun and Mon. - // The blankCellOffset is needed in cases where the first N cells are used by the month label. - for (var i = blankCellOffset; i < firstDayOfTheWeek; i++) { - row.appendChild(this.buildDateCell()); - } - - // Add a cell for each day of the month, keeping track of the day of the week so that - // we know when to start a new row. - var dayOfWeek = firstDayOfTheWeek; - var iterationDate = firstDayOfMonth; - for (var d = 1; d <= numberOfDaysInMonth; d++) { - // If we've reached the end of the week, start a new row. - if (dayOfWeek === 7) { - // We've finished the first row, so we're done if this is the final month. - if (isFinalMonth) { - return monthBody; - } - dayOfWeek = 0; - rowNumber++; - row = this.buildDateRow(rowNumber); - monthBody.appendChild(row); - } - - iterationDate.setDate(d); - var cell = this.buildDateCell(iterationDate); - row.appendChild(cell); - - dayOfWeek++; - } - - // Ensure that the last row of the month has 7 cells. - while (row.childNodes.length < 7) { - row.appendChild(this.buildDateCell()); - } - - // Ensure that all months have 6 rows. This is necessary for now because the virtual-repeat - // requires that all items have exactly the same height. - while (monthBody.childNodes.length < 6) { - var whitespaceRow = this.buildDateRow(); - for (var j = 0; j < 7; j++) { - whitespaceRow.appendChild(this.buildDateCell()); - } - monthBody.appendChild(whitespaceRow); - } - - return monthBody; - }; - - /** - * Gets the day-of-the-week index for a date for the current locale. - * @private - * @param {Date} date - * @returns {number} The column index of the date in the calendar. - */ - CalendarMonthBodyCtrl.prototype.getLocaleDay_ = function(date) { - return (date.getDay() + (7 - this.dateLocale.firstDayOfWeek)) % 7; - }; -})(); - -(function() { - 'use strict'; - - CalendarYearCtrl['$inject'] = ["$element", "$scope", "$animate", "$q", "$$mdDateUtil"]; - angular.module('material.components.datepicker') - .directive('mdCalendarYear', calendarDirective); - - /** - * Height of one calendar year tbody. This must be made known to the virtual-repeat and is - * subsequently used for scrolling to specific years. - */ - var TBODY_HEIGHT = 88; - - /** Private component, representing a list of years in the calendar. */ - function calendarDirective() { - return { - template: - '<div class="md-calendar-scroll-mask">' + - '<md-virtual-repeat-container class="md-calendar-scroll-container">' + - '<table role="grid" tabindex="0" class="md-calendar" aria-readonly="true">' + - '<tbody ' + - 'md-calendar-year-body ' + - 'role="rowgroup" ' + - 'md-virtual-repeat="i in yearCtrl.items" ' + - 'md-year-offset="$index" class="md-calendar-year" ' + - 'md-start-index="yearCtrl.getFocusedYearIndex()" ' + - 'md-item-size="' + TBODY_HEIGHT + '">' + - // The <tr> ensures that the <tbody> will have the proper - // height, even though it may be empty. - '<tr aria-hidden="true" style="height:' + TBODY_HEIGHT + 'px;"></tr>' + - '</tbody>' + - '</table>' + - '</md-virtual-repeat-container>' + - '</div>', - require: ['^^mdCalendar', 'mdCalendarYear'], - controller: CalendarYearCtrl, - controllerAs: 'yearCtrl', - bindToController: true, - link: function(scope, element, attrs, controllers) { - var calendarCtrl = controllers[0]; - var yearCtrl = controllers[1]; - yearCtrl.initialize(calendarCtrl); - } - }; - } - - /** - * Controller for the mdCalendar component. - * ngInject @constructor - */ - function CalendarYearCtrl($element, $scope, $animate, $q, $$mdDateUtil) { - - /** @final {!angular.JQLite} */ - this.$element = $element; - - /** @final {!angular.Scope} */ - this.$scope = $scope; - - /** @final {!angular.$animate} */ - this.$animate = $animate; - - /** @final {!angular.$q} */ - this.$q = $q; - - /** @final */ - this.dateUtil = $$mdDateUtil; - - /** @final {HTMLElement} */ - this.calendarScroller = $element[0].querySelector('.md-virtual-repeat-scroller'); - - /** @type {boolean} */ - this.isInitialized = false; - - /** @type {boolean} */ - this.isMonthTransitionInProgress = false; - - var self = this; - - /** - * Handles a click event on a date cell. - * Created here so that every cell can use the same function instance. - * @this {HTMLTableCellElement} The cell that was clicked. - */ - this.cellClickHandler = function() { - self.calendarCtrl.setCurrentView('month', $$mdDateUtil.getTimestampFromNode(this)); - }; - } - - /** - * Initialize the controller by saving a reference to the calendar and - * setting up the object that will be iterated by the virtual repeater. - */ - CalendarYearCtrl.prototype.initialize = function(calendarCtrl) { - /** - * Dummy array-like object for virtual-repeat to iterate over. The length is the total - * number of years that can be viewed. We add 1 extra in order to include the current year. - */ - this.items = { - length: this.dateUtil.getYearDistance( - calendarCtrl.firstRenderableDate, - calendarCtrl.lastRenderableDate - ) + 1 - }; - - this.calendarCtrl = calendarCtrl; - this.attachScopeListeners(); - calendarCtrl.updateVirtualRepeat(); - - // Fire the initial render, since we might have missed it the first time it fired. - calendarCtrl.ngModelCtrl && calendarCtrl.ngModelCtrl.$render(); - }; - - /** - * Gets the "index" of the currently selected date as it would be in the virtual-repeat. - * @returns {number} - */ - CalendarYearCtrl.prototype.getFocusedYearIndex = function() { - var calendarCtrl = this.calendarCtrl; - - return this.dateUtil.getYearDistance( - calendarCtrl.firstRenderableDate, - calendarCtrl.displayDate || calendarCtrl.selectedDate || calendarCtrl.today - ); - }; - - /** - * Change the date that is highlighted in the calendar. - * @param {Date} date - */ - CalendarYearCtrl.prototype.changeDate = function(date) { - // Initialization is deferred until this function is called because we want to reflect - // the starting value of ngModel. - if (!this.isInitialized) { - this.calendarCtrl.hideVerticalScrollbar(this); - this.isInitialized = true; - return this.$q.when(); - } else if (this.dateUtil.isValidDate(date) && !this.isMonthTransitionInProgress) { - var self = this; - var animationPromise = this.animateDateChange(date); - - self.isMonthTransitionInProgress = true; - self.calendarCtrl.displayDate = date; - - return animationPromise.then(function() { - self.isMonthTransitionInProgress = false; - }); - } - }; - - /** - * Animates the transition from the calendar's current month to the given month. - * @param {Date} date - * @returns {angular.$q.Promise} The animation promise. - */ - CalendarYearCtrl.prototype.animateDateChange = function(date) { - if (this.dateUtil.isValidDate(date)) { - var monthDistance = this.dateUtil.getYearDistance(this.calendarCtrl.firstRenderableDate, date); - this.calendarScroller.scrollTop = monthDistance * TBODY_HEIGHT; - } - - return this.$q.when(); - }; - - /** - * Handles the year-view-specific keyboard interactions. - * @param {Object} event Scope event object passed by the calendar. - * @param {String} action Action, corresponding to the key that was pressed. - */ - CalendarYearCtrl.prototype.handleKeyEvent = function(event, action) { - var calendarCtrl = this.calendarCtrl; - var displayDate = calendarCtrl.displayDate; - - if (action === 'select') { - this.changeDate(displayDate).then(function() { - calendarCtrl.setCurrentView('month', displayDate); - calendarCtrl.focus(displayDate); - }); - } else { - var date = null; - var dateUtil = this.dateUtil; - - switch (action) { - case 'move-right': date = dateUtil.incrementMonths(displayDate, 1); break; - case 'move-left': date = dateUtil.incrementMonths(displayDate, -1); break; - - case 'move-row-down': date = dateUtil.incrementMonths(displayDate, 6); break; - case 'move-row-up': date = dateUtil.incrementMonths(displayDate, -6); break; - } - - if (date) { - var min = calendarCtrl.minDate ? dateUtil.getFirstDateOfMonth(calendarCtrl.minDate) : null; - var max = calendarCtrl.maxDate ? dateUtil.getFirstDateOfMonth(calendarCtrl.maxDate) : null; - date = dateUtil.getFirstDateOfMonth(this.dateUtil.clampDate(date, min, max)); - - this.changeDate(date).then(function() { - calendarCtrl.focus(date); - }); - } - } - }; - - /** - * Attaches listeners for the scope events that are broadcast by the calendar. - */ - CalendarYearCtrl.prototype.attachScopeListeners = function() { - var self = this; - - self.$scope.$on('md-calendar-parent-changed', function(event, value) { - self.changeDate(value); - }); - - self.$scope.$on('md-calendar-parent-action', angular.bind(self, self.handleKeyEvent)); - }; -})(); - -(function() { - 'use strict'; - - CalendarYearBodyCtrl['$inject'] = ["$element", "$$mdDateUtil", "$mdDateLocale"]; - angular.module('material.components.datepicker') - .directive('mdCalendarYearBody', mdCalendarYearDirective); - - /** - * Private component, consumed by the md-calendar-year, which separates the DOM construction logic - * and allows for the year view to use md-virtual-repeat. - */ - function mdCalendarYearDirective() { - return { - require: ['^^mdCalendar', '^^mdCalendarYear', 'mdCalendarYearBody'], - scope: { offset: '=mdYearOffset' }, - controller: CalendarYearBodyCtrl, - controllerAs: 'mdYearBodyCtrl', - bindToController: true, - link: function(scope, element, attrs, controllers) { - var calendarCtrl = controllers[0]; - var yearCtrl = controllers[1]; - var yearBodyCtrl = controllers[2]; - - yearBodyCtrl.calendarCtrl = calendarCtrl; - yearBodyCtrl.yearCtrl = yearCtrl; - - scope.$watch(function() { return yearBodyCtrl.offset; }, function(offset) { - if (angular.isNumber(offset)) { - yearBodyCtrl.generateContent(); - } - }); - } - }; - } - - /** - * Controller for a single year. - * ngInject @constructor - */ - function CalendarYearBodyCtrl($element, $$mdDateUtil, $mdDateLocale) { - /** @final {!angular.JQLite} */ - this.$element = $element; - - /** @final */ - this.dateUtil = $$mdDateUtil; - - /** @final */ - this.dateLocale = $mdDateLocale; - - /** @type {Object} Reference to the calendar. */ - this.calendarCtrl = null; - - /** @type {Object} Reference to the year view. */ - this.yearCtrl = null; - - /** - * Number of months from the start of the month "items" that the currently rendered month - * occurs. Set via angular data binding. - * @type {number} - */ - this.offset = null; - - /** - * Date cell to focus after appending the month to the document. - * @type {HTMLElement} - */ - this.focusAfterAppend = null; - } - - /** Generate and append the content for this year to the directive element. */ - CalendarYearBodyCtrl.prototype.generateContent = function() { - var date = this.dateUtil.incrementYears(this.calendarCtrl.firstRenderableDate, this.offset); - - this.$element - .empty() - .append(this.buildCalendarForYear(date)); - - if (this.focusAfterAppend) { - this.focusAfterAppend.classList.add(this.calendarCtrl.FOCUSED_DATE_CLASS); - this.focusAfterAppend.focus(); - this.focusAfterAppend = null; - } - }; - - /** - * Creates a single cell to contain a year in the calendar. - * @param {number} opt_year Four-digit year. - * @param {number} opt_month Zero-indexed month. - * @returns {HTMLElement} - */ - CalendarYearBodyCtrl.prototype.buildMonthCell = function(year, month) { - var calendarCtrl = this.calendarCtrl; - var yearCtrl = this.yearCtrl; - var cell = this.buildBlankCell(); - - // Represent this month/year as a date. - var firstOfMonth = new Date(year, month, 1); - cell.setAttribute('aria-label', this.dateLocale.monthFormatter(firstOfMonth)); - cell.id = calendarCtrl.getDateId(firstOfMonth, 'year'); - - // Use `data-timestamp` attribute because IE10 does not support the `dataset` property. - cell.setAttribute('data-timestamp', firstOfMonth.getTime()); - - if (this.dateUtil.isSameMonthAndYear(firstOfMonth, calendarCtrl.today)) { - cell.classList.add(calendarCtrl.TODAY_CLASS); - } - - if (this.dateUtil.isValidDate(calendarCtrl.selectedDate) && - this.dateUtil.isSameMonthAndYear(firstOfMonth, calendarCtrl.selectedDate)) { - cell.classList.add(calendarCtrl.SELECTED_DATE_CLASS); - cell.setAttribute('aria-selected', 'true'); - } - - var cellText = this.dateLocale.shortMonths[month]; - - if (this.dateUtil.isMonthWithinRange(firstOfMonth, - calendarCtrl.minDate, calendarCtrl.maxDate)) { - var selectionIndicator = document.createElement('span'); - selectionIndicator.classList.add('md-calendar-date-selection-indicator'); - selectionIndicator.textContent = cellText; - cell.appendChild(selectionIndicator); - cell.addEventListener('click', yearCtrl.cellClickHandler); - - if (calendarCtrl.displayDate && this.dateUtil.isSameMonthAndYear(firstOfMonth, calendarCtrl.displayDate)) { - this.focusAfterAppend = cell; - } - } else { - cell.classList.add('md-calendar-date-disabled'); - cell.textContent = cellText; - } - - return cell; - }; - - /** - * Builds a blank cell. - * @return {HTMLTableCellElement} - */ - CalendarYearBodyCtrl.prototype.buildBlankCell = function() { - var cell = document.createElement('td'); - cell.tabIndex = -1; - cell.classList.add('md-calendar-date'); - cell.setAttribute('role', 'gridcell'); - - cell.setAttribute('tabindex', '-1'); - return cell; - }; - - /** - * Builds the <tbody> content for the given year. - * @param {Date} date Date for which the content should be built. - * @returns {DocumentFragment} A document fragment containing the months within the year. - */ - CalendarYearBodyCtrl.prototype.buildCalendarForYear = function(date) { - // Store rows for the month in a document fragment so that we can append them all at once. - var year = date.getFullYear(); - var yearBody = document.createDocumentFragment(); - - var monthCell, i; - // First row contains label and Jan-Jun. - var firstRow = document.createElement('tr'); - var labelCell = document.createElement('td'); - labelCell.className = 'md-calendar-month-label'; - labelCell.textContent = year; - firstRow.appendChild(labelCell); - - for (i = 0; i < 6; i++) { - firstRow.appendChild(this.buildMonthCell(year, i)); - } - yearBody.appendChild(firstRow); - - // Second row contains a blank cell and Jul-Dec. - var secondRow = document.createElement('tr'); - secondRow.appendChild(this.buildBlankCell()); - for (i = 6; i < 12; i++) { - secondRow.appendChild(this.buildMonthCell(year, i)); - } - yearBody.appendChild(secondRow); - - return yearBody; - }; -})(); - -(function() { - 'use strict'; - - /** - * @ngdoc service - * @name $mdDateLocaleProvider - * @module material.components.datepicker - * - * @description - * The `$mdDateLocaleProvider` is the provider that creates the `$mdDateLocale` service. - * This provider that allows the user to specify messages, formatters, and parsers for date - * internationalization. The `$mdDateLocale` service itself is consumed by Angular Material - * components that deal with dates. - * - * @property {(Array<string>)=} months Array of month names (in order). - * @property {(Array<string>)=} shortMonths Array of abbreviated month names. - * @property {(Array<string>)=} days Array of the days of the week (in order). - * @property {(Array<string>)=} shortDays Array of abbreviated dayes of the week. - * @property {(Array<string>)=} dates Array of dates of the month. Only necessary for locales - * using a numeral system other than [1, 2, 3...]. - * @property {(Array<string>)=} firstDayOfWeek The first day of the week. Sunday = 0, Monday = 1, - * etc. - * @property {(function(string): Date)=} parseDate Function to parse a date object from a string. - * @property {(function(Date, string): string)=} formatDate Function to format a date object to a - * string. The datepicker directive also provides the time zone, if it was specified. - * @property {(function(Date): string)=} monthHeaderFormatter Function that returns the label for - * a month given a date. - * @property {(function(Date): string)=} monthFormatter Function that returns the full name of a month - * for a giben date. - * @property {(function(number): string)=} weekNumberFormatter Function that returns a label for - * a week given the week number. - * @property {(string)=} msgCalendar Translation of the label "Calendar" for the current locale. - * @property {(string)=} msgOpenCalendar Translation of the button label "Open calendar" for the - * current locale. - * @property {Date=} firstRenderableDate The date from which the datepicker calendar will begin - * rendering. Note that this will be ignored if a minimum date is set. Defaults to January 1st 1880. - * @property {Date=} lastRenderableDate The last date that will be rendered by the datepicker - * calendar. Note that this will be ignored if a maximum date is set. Defaults to January 1st 2130. - * - * @usage - * <hljs lang="js"> - * myAppModule.config(function($mdDateLocaleProvider) { - * - * // Example of a French localization. - * $mdDateLocaleProvider.months = ['janvier', 'février', 'mars', ...]; - * $mdDateLocaleProvider.shortMonths = ['janv', 'févr', 'mars', ...]; - * $mdDateLocaleProvider.days = ['dimanche', 'lundi', 'mardi', ...]; - * $mdDateLocaleProvider.shortDays = ['Di', 'Lu', 'Ma', ...]; - * - * // Can change week display to start on Monday. - * $mdDateLocaleProvider.firstDayOfWeek = 1; - * - * // Optional. - * $mdDateLocaleProvider.dates = [1, 2, 3, 4, 5, 6, ...]; - * - * // Example uses moment.js to parse and format dates. - * $mdDateLocaleProvider.parseDate = function(dateString) { - * var m = moment(dateString, 'L', true); - * return m.isValid() ? m.toDate() : new Date(NaN); - * }; - * - * $mdDateLocaleProvider.formatDate = function(date) { - * var m = moment(date); - * return m.isValid() ? m.format('L') : ''; - * }; - * - * $mdDateLocaleProvider.monthHeaderFormatter = function(date) { - * return myShortMonths[date.getMonth()] + ' ' + date.getFullYear(); - * }; - * - * // In addition to date display, date components also need localized messages - * // for aria-labels for screen-reader users. - * - * $mdDateLocaleProvider.weekNumberFormatter = function(weekNumber) { - * return 'Semaine ' + weekNumber; - * }; - * - * $mdDateLocaleProvider.msgCalendar = 'Calendrier'; - * $mdDateLocaleProvider.msgOpenCalendar = 'Ouvrir le calendrier'; - * - * // You can also set when your calendar begins and ends. - * $mdDateLocaleProvider.firstRenderableDate = new Date(1776, 6, 4); - * $mdDateLocaleProvider.lastRenderableDate = new Date(2012, 11, 21); - * }); - * </hljs> - * - */ - angular.module('material.components.datepicker').config(["$provide", function($provide) { - // TODO(jelbourn): Assert provided values are correctly formatted. Need assertions. - - /** @constructor */ - function DateLocaleProvider() { - /** Array of full month names. E.g., ['January', 'Febuary', ...] */ - this.months = null; - - /** Array of abbreviated month names. E.g., ['Jan', 'Feb', ...] */ - this.shortMonths = null; - - /** Array of full day of the week names. E.g., ['Monday', 'Tuesday', ...] */ - this.days = null; - - /** Array of abbreviated dat of the week names. E.g., ['M', 'T', ...] */ - this.shortDays = null; - - /** Array of dates of a month (1 - 31). Characters might be different in some locales. */ - this.dates = null; - - /** Index of the first day of the week. 0 = Sunday, 1 = Monday, etc. */ - this.firstDayOfWeek = 0; - - /** - * Function that converts the date portion of a Date to a string. - * @type {(function(Date): string)} - */ - this.formatDate = null; - - /** - * Function that converts a date string to a Date object (the date portion) - * @type {function(string): Date} - */ - this.parseDate = null; - - /** - * Function that formats a Date into a month header string. - * @type {function(Date): string} - */ - this.monthHeaderFormatter = null; - - /** - * Function that formats a week number into a label for the week. - * @type {function(number): string} - */ - this.weekNumberFormatter = null; - - /** - * Function that formats a date into a long aria-label that is read - * when the focused date changes. - * @type {function(Date): string} - */ - this.longDateFormatter = null; - - /** - * ARIA label for the calendar "dialog" used in the datepicker. - * @type {string} - */ - this.msgCalendar = ''; - - /** - * ARIA label for the datepicker's "Open calendar" buttons. - * @type {string} - */ - this.msgOpenCalendar = ''; - } - - /** - * Factory function that returns an instance of the dateLocale service. - * ngInject - * @param $locale - * @returns {DateLocale} - */ - DateLocaleProvider.prototype.$get = function($locale, $filter) { - /** - * Default date-to-string formatting function. - * @param {!Date} date - * @param {string=} timezone - * @returns {string} - */ - function defaultFormatDate(date, timezone) { - if (!date) { - return ''; - } - - // All of the dates created through ng-material *should* be set to midnight. - // If we encounter a date where the localeTime shows at 11pm instead of midnight, - // we have run into an issue with DST where we need to increment the hour by one: - // var d = new Date(1992, 9, 8, 0, 0, 0); - // d.toLocaleString(); // == "10/7/1992, 11:00:00 PM" - var localeTime = date.toLocaleTimeString(); - var formatDate = date; - if (date.getHours() === 0 && - (localeTime.indexOf('11:') !== -1 || localeTime.indexOf('23:') !== -1)) { - formatDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 1, 0, 0); - } - - return $filter('date')(formatDate, 'M/d/yyyy', timezone); - } - - /** - * Default string-to-date parsing function. - * @param {string} dateString - * @returns {!Date} - */ - function defaultParseDate(dateString) { - return new Date(dateString); - } - - /** - * Default function to determine whether a string makes sense to be - * parsed to a Date object. - * - * This is very permissive and is just a basic sanity check to ensure that - * things like single integers aren't able to be parsed into dates. - * @param {string} dateString - * @returns {boolean} - */ - function defaultIsDateComplete(dateString) { - dateString = dateString.trim(); - - // Looks for three chunks of content (either numbers or text) separated - // by delimiters. - var re = /^(([a-zA-Z]{3,}|[0-9]{1,4})([ \.,]+|[\/\-])){2}([a-zA-Z]{3,}|[0-9]{1,4})$/; - return re.test(dateString); - } - - /** - * Default date-to-string formatter to get a month header. - * @param {!Date} date - * @returns {string} - */ - function defaultMonthHeaderFormatter(date) { - return service.shortMonths[date.getMonth()] + ' ' + date.getFullYear(); - } - - /** - * Default formatter for a month. - * @param {!Date} date - * @returns {string} - */ - function defaultMonthFormatter(date) { - return service.months[date.getMonth()] + ' ' + date.getFullYear(); - } - - /** - * Default week number formatter. - * @param number - * @returns {string} - */ - function defaultWeekNumberFormatter(number) { - return 'Week ' + number; - } - - /** - * Default formatter for date cell aria-labels. - * @param {!Date} date - * @returns {string} - */ - function defaultLongDateFormatter(date) { - // Example: 'Thursday June 18 2015' - return [ - service.days[date.getDay()], - service.months[date.getMonth()], - service.dates[date.getDate()], - date.getFullYear() - ].join(' '); - } - - // The default "short" day strings are the first character of each day, - // e.g., "Monday" => "M". - var defaultShortDays = $locale.DATETIME_FORMATS.SHORTDAY.map(function(day) { - return day.substring(0, 1); - }); - - // The default dates are simply the numbers 1 through 31. - var defaultDates = Array(32); - for (var i = 1; i <= 31; i++) { - defaultDates[i] = i; - } - - // Default ARIA messages are in English (US). - var defaultMsgCalendar = 'Calendar'; - var defaultMsgOpenCalendar = 'Open calendar'; - - // Default start/end dates that are rendered in the calendar. - var defaultFirstRenderableDate = new Date(1880, 0, 1); - var defaultLastRendereableDate = new Date(defaultFirstRenderableDate.getFullYear() + 250, 0, 1); - - var service = { - months: this.months || $locale.DATETIME_FORMATS.MONTH, - shortMonths: this.shortMonths || $locale.DATETIME_FORMATS.SHORTMONTH, - days: this.days || $locale.DATETIME_FORMATS.DAY, - shortDays: this.shortDays || defaultShortDays, - dates: this.dates || defaultDates, - firstDayOfWeek: this.firstDayOfWeek || 0, - formatDate: this.formatDate || defaultFormatDate, - parseDate: this.parseDate || defaultParseDate, - isDateComplete: this.isDateComplete || defaultIsDateComplete, - monthHeaderFormatter: this.monthHeaderFormatter || defaultMonthHeaderFormatter, - monthFormatter: this.monthFormatter || defaultMonthFormatter, - weekNumberFormatter: this.weekNumberFormatter || defaultWeekNumberFormatter, - longDateFormatter: this.longDateFormatter || defaultLongDateFormatter, - msgCalendar: this.msgCalendar || defaultMsgCalendar, - msgOpenCalendar: this.msgOpenCalendar || defaultMsgOpenCalendar, - firstRenderableDate: this.firstRenderableDate || defaultFirstRenderableDate, - lastRenderableDate: this.lastRenderableDate || defaultLastRendereableDate - }; - - return service; - }; - DateLocaleProvider.prototype.$get['$inject'] = ["$locale", "$filter"]; - - $provide.provider('$mdDateLocale', new DateLocaleProvider()); - }]); -})(); - -(function() { - 'use strict'; - - /** - * Utility for performing date calculations to facilitate operation of the calendar and - * datepicker. - */ - angular.module('material.components.datepicker').factory('$$mdDateUtil', function() { - return { - getFirstDateOfMonth: getFirstDateOfMonth, - getNumberOfDaysInMonth: getNumberOfDaysInMonth, - getDateInNextMonth: getDateInNextMonth, - getDateInPreviousMonth: getDateInPreviousMonth, - isInNextMonth: isInNextMonth, - isInPreviousMonth: isInPreviousMonth, - getDateMidpoint: getDateMidpoint, - isSameMonthAndYear: isSameMonthAndYear, - getWeekOfMonth: getWeekOfMonth, - incrementDays: incrementDays, - incrementMonths: incrementMonths, - getLastDateOfMonth: getLastDateOfMonth, - isSameDay: isSameDay, - getMonthDistance: getMonthDistance, - isValidDate: isValidDate, - setDateTimeToMidnight: setDateTimeToMidnight, - createDateAtMidnight: createDateAtMidnight, - isDateWithinRange: isDateWithinRange, - incrementYears: incrementYears, - getYearDistance: getYearDistance, - clampDate: clampDate, - getTimestampFromNode: getTimestampFromNode, - isMonthWithinRange: isMonthWithinRange - }; - - /** - * Gets the first day of the month for the given date's month. - * @param {Date} date - * @returns {Date} - */ - function getFirstDateOfMonth(date) { - return new Date(date.getFullYear(), date.getMonth(), 1); - } - - /** - * Gets the number of days in the month for the given date's month. - * @param date - * @returns {number} - */ - function getNumberOfDaysInMonth(date) { - return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); - } - - /** - * Get an arbitrary date in the month after the given date's month. - * @param date - * @returns {Date} - */ - function getDateInNextMonth(date) { - return new Date(date.getFullYear(), date.getMonth() + 1, 1); - } - - /** - * Get an arbitrary date in the month before the given date's month. - * @param date - * @returns {Date} - */ - function getDateInPreviousMonth(date) { - return new Date(date.getFullYear(), date.getMonth() - 1, 1); - } - - /** - * Gets whether two dates have the same month and year. - * @param {Date} d1 - * @param {Date} d2 - * @returns {boolean} - */ - function isSameMonthAndYear(d1, d2) { - return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth(); - } - - /** - * Gets whether two dates are the same day (not not necesarily the same time). - * @param {Date} d1 - * @param {Date} d2 - * @returns {boolean} - */ - function isSameDay(d1, d2) { - return d1.getDate() == d2.getDate() && isSameMonthAndYear(d1, d2); - } - - /** - * Gets whether a date is in the month immediately after some date. - * @param {Date} startDate The date from which to compare. - * @param {Date} endDate The date to check. - * @returns {boolean} - */ - function isInNextMonth(startDate, endDate) { - var nextMonth = getDateInNextMonth(startDate); - return isSameMonthAndYear(nextMonth, endDate); - } - - /** - * Gets whether a date is in the month immediately before some date. - * @param {Date} startDate The date from which to compare. - * @param {Date} endDate The date to check. - * @returns {boolean} - */ - function isInPreviousMonth(startDate, endDate) { - var previousMonth = getDateInPreviousMonth(startDate); - return isSameMonthAndYear(endDate, previousMonth); - } - - /** - * Gets the midpoint between two dates. - * @param {Date} d1 - * @param {Date} d2 - * @returns {Date} - */ - function getDateMidpoint(d1, d2) { - return createDateAtMidnight((d1.getTime() + d2.getTime()) / 2); - } - - /** - * Gets the week of the month that a given date occurs in. - * @param {Date} date - * @returns {number} Index of the week of the month (zero-based). - */ - function getWeekOfMonth(date) { - var firstDayOfMonth = getFirstDateOfMonth(date); - return Math.floor((firstDayOfMonth.getDay() + date.getDate() - 1) / 7); - } - - /** - * Gets a new date incremented by the given number of days. Number of days can be negative. - * @param {Date} date - * @param {number} numberOfDays - * @returns {Date} - */ - function incrementDays(date, numberOfDays) { - return new Date(date.getFullYear(), date.getMonth(), date.getDate() + numberOfDays); - } - - /** - * Gets a new date incremented by the given number of months. Number of months can be negative. - * If the date of the given month does not match the target month, the date will be set to the - * last day of the month. - * @param {Date} date - * @param {number} numberOfMonths - * @returns {Date} - */ - function incrementMonths(date, numberOfMonths) { - // If the same date in the target month does not actually exist, the Date object will - // automatically advance *another* month by the number of missing days. - // For example, if you try to go from Jan. 30 to Feb. 30, you'll end up on March 2. - // So, we check if the month overflowed and go to the last day of the target month instead. - var dateInTargetMonth = new Date(date.getFullYear(), date.getMonth() + numberOfMonths, 1); - var numberOfDaysInMonth = getNumberOfDaysInMonth(dateInTargetMonth); - if (numberOfDaysInMonth < date.getDate()) { - dateInTargetMonth.setDate(numberOfDaysInMonth); - } else { - dateInTargetMonth.setDate(date.getDate()); - } - - return dateInTargetMonth; - } - - /** - * Get the integer distance between two months. This *only* considers the month and year - * portion of the Date instances. - * - * @param {Date} start - * @param {Date} end - * @returns {number} Number of months between `start` and `end`. If `end` is before `start` - * chronologically, this number will be negative. - */ - function getMonthDistance(start, end) { - return (12 * (end.getFullYear() - start.getFullYear())) + (end.getMonth() - start.getMonth()); - } - - /** - * Gets the last day of the month for the given date. - * @param {Date} date - * @returns {Date} - */ - function getLastDateOfMonth(date) { - return new Date(date.getFullYear(), date.getMonth(), getNumberOfDaysInMonth(date)); - } - - /** - * Checks whether a date is valid. - * @param {Date} date - * @return {boolean} Whether the date is a valid Date. - */ - function isValidDate(date) { - return date && date.getTime && !isNaN(date.getTime()); - } - - /** - * Sets a date's time to midnight. - * @param {Date} date - */ - function setDateTimeToMidnight(date) { - if (isValidDate(date)) { - date.setHours(0, 0, 0, 0); - } - } - - /** - * Creates a date with the time set to midnight. - * Drop-in replacement for two forms of the Date constructor: - * 1. No argument for Date representing now. - * 2. Single-argument value representing number of seconds since Unix Epoch - * or a Date object. - * @param {number|Date=} opt_value - * @return {Date} New date with time set to midnight. - */ - function createDateAtMidnight(opt_value) { - var date; - if (angular.isUndefined(opt_value)) { - date = new Date(); - } else { - date = new Date(opt_value); - } - setDateTimeToMidnight(date); - return date; - } - - /** - * Checks if a date is within a min and max range, ignoring the time component. - * If minDate or maxDate are not dates, they are ignored. - * @param {Date} date - * @param {Date} minDate - * @param {Date} maxDate - */ - function isDateWithinRange(date, minDate, maxDate) { - var dateAtMidnight = createDateAtMidnight(date); - var minDateAtMidnight = isValidDate(minDate) ? createDateAtMidnight(minDate) : null; - var maxDateAtMidnight = isValidDate(maxDate) ? createDateAtMidnight(maxDate) : null; - return (!minDateAtMidnight || minDateAtMidnight <= dateAtMidnight) && - (!maxDateAtMidnight || maxDateAtMidnight >= dateAtMidnight); - } - - /** - * Gets a new date incremented by the given number of years. Number of years can be negative. - * See `incrementMonths` for notes on overflow for specific dates. - * @param {Date} date - * @param {number} numberOfYears - * @returns {Date} - */ - function incrementYears(date, numberOfYears) { - return incrementMonths(date, numberOfYears * 12); - } - - /** - * Get the integer distance between two years. This *only* considers the year portion of the - * Date instances. - * - * @param {Date} start - * @param {Date} end - * @returns {number} Number of months between `start` and `end`. If `end` is before `start` - * chronologically, this number will be negative. - */ - function getYearDistance(start, end) { - return end.getFullYear() - start.getFullYear(); - } - - /** - * Clamps a date between a minimum and a maximum date. - * @param {Date} date Date to be clamped - * @param {Date=} minDate Minimum date - * @param {Date=} maxDate Maximum date - * @return {Date} - */ - function clampDate(date, minDate, maxDate) { - var boundDate = date; - if (minDate && date < minDate) { - boundDate = new Date(minDate.getTime()); - } - if (maxDate && date > maxDate) { - boundDate = new Date(maxDate.getTime()); - } - return boundDate; - } - - /** - * Extracts and parses the timestamp from a DOM node. - * @param {HTMLElement} node Node from which the timestamp will be extracted. - * @return {number} Time since epoch. - */ - function getTimestampFromNode(node) { - if (node && node.hasAttribute('data-timestamp')) { - return Number(node.getAttribute('data-timestamp')); - } - } - - /** - * Checks if a month is within a min and max range, ignoring the date and time components. - * If minDate or maxDate are not dates, they are ignored. - * @param {Date} date - * @param {Date} minDate - * @param {Date} maxDate - */ - function isMonthWithinRange(date, minDate, maxDate) { - var month = date.getMonth(); - var year = date.getFullYear(); - - return (!minDate || minDate.getFullYear() < year || minDate.getMonth() <= month) && - (!maxDate || maxDate.getFullYear() > year || maxDate.getMonth() >= month); - } - }); -})(); - -(function() { - 'use strict'; - - // POST RELEASE - // TODO(jelbourn): Demo that uses moment.js - // TODO(jelbourn): make sure this plays well with validation and ngMessages. - // TODO(jelbourn): calendar pane doesn't open up outside of visible viewport. - // TODO(jelbourn): forward more attributes to the internal input (required, autofocus, etc.) - // TODO(jelbourn): something better for mobile (calendar panel takes up entire screen?) - // TODO(jelbourn): input behavior (masking? auto-complete?) - - - DatePickerCtrl['$inject'] = ["$scope", "$element", "$attrs", "$window", "$mdConstant", "$mdTheming", "$mdUtil", "$mdDateLocale", "$$mdDateUtil", "$$rAF", "$filter"]; - datePickerDirective['$inject'] = ["$$mdSvgRegistry", "$mdUtil", "$mdAria", "inputDirective"]; - angular.module('material.components.datepicker') - .directive('mdDatepicker', datePickerDirective); - - /** - * @ngdoc directive - * @name mdDatepicker - * @module material.components.datepicker - * - * @param {Date} ng-model The component's model. Expects a JavaScript Date object. - * @param {Object=} ng-model-options Allows tuning of the way in which `ng-model` is being updated. Also allows - * for a timezone to be specified. <a href="https://docs.angularjs.org/api/ng/directive/ngModelOptions#usage">Read more at the ngModelOptions docs.</a> - * @param {expression=} ng-change Expression evaluated when the model value changes. - * @param {expression=} ng-focus Expression evaluated when the input is focused or the calendar is opened. - * @param {expression=} ng-blur Expression evaluated when focus is removed from the input or the calendar is closed. - * @param {boolean=} ng-disabled Whether the datepicker is disabled. - * @param {boolean=} ng-required Whether a value is required for the datepicker. - * @param {Date=} md-min-date Expression representing a min date (inclusive). - * @param {Date=} md-max-date Expression representing a max date (inclusive). - * @param {(function(Date): boolean)=} md-date-filter Function expecting a date and returning a boolean whether it can be selected or not. - * @param {String=} md-placeholder The date input placeholder value. - * @param {String=} md-open-on-focus When present, the calendar will be opened when the input is focused. - * @param {Boolean=} md-is-open Expression that can be used to open the datepicker's calendar on-demand. - * @param {String=} md-current-view Default open view of the calendar pane. Can be either "month" or "year". - * @param {String=} md-hide-icons Determines which datepicker icons should be hidden. Note that this may cause the - * datepicker to not align properly with other components. **Use at your own risk.** Possible values are: - * * `"all"` - Hides all icons. - * * `"calendar"` - Only hides the calendar icon. - * * `"triangle"` - Only hides the triangle icon. - * @param {Object=} md-date-locale Allows for the values from the `$mdDateLocaleProvider` to be - * ovewritten on a per-element basis (e.g. `msgOpenCalendar` can be overwritten with - * `md-date-locale="{ msgOpenCalendar: 'Open a special calendar' }"`). - * - * @description - * `<md-datepicker>` is a component used to select a single date. - * For information on how to configure internationalization for the date picker, - * see `$mdDateLocaleProvider`. - * - * This component supports [ngMessages](https://docs.angularjs.org/api/ngMessages/directive/ngMessages). - * Supported attributes are: - * * `required`: whether a required date is not set. - * * `mindate`: whether the selected date is before the minimum allowed date. - * * `maxdate`: whether the selected date is after the maximum allowed date. - * * `debounceInterval`: ms to delay input processing (since last debounce reset); default value 500ms - * - * @usage - * <hljs lang="html"> - * <md-datepicker ng-model="birthday"></md-datepicker> - * </hljs> - * - */ - - function datePickerDirective($$mdSvgRegistry, $mdUtil, $mdAria, inputDirective) { - return { - template: function(tElement, tAttrs) { - // Buttons are not in the tab order because users can open the calendar via keyboard - // interaction on the text input, and multiple tab stops for one component (picker) - // may be confusing. - var hiddenIcons = tAttrs.mdHideIcons; - var ariaLabelValue = tAttrs.ariaLabel || tAttrs.mdPlaceholder; - - var calendarButton = (hiddenIcons === 'all' || hiddenIcons === 'calendar') ? '' : - '<md-button class="md-datepicker-button md-icon-button" type="button" ' + - 'tabindex="-1" aria-hidden="true" ' + - 'ng-click="ctrl.openCalendarPane($event)">' + - '<md-icon class="md-datepicker-calendar-icon" aria-label="md-calendar" ' + - 'md-svg-src="' + $$mdSvgRegistry.mdCalendar + '"></md-icon>' + - '</md-button>'; - - var triangleButton = ''; - - if (hiddenIcons !== 'all' && hiddenIcons !== 'triangle') { - triangleButton = '' + - '<md-button type="button" md-no-ink ' + - 'class="md-datepicker-triangle-button md-icon-button" ' + - 'ng-click="ctrl.openCalendarPane($event)" ' + - 'aria-label="{{::ctrl.locale.msgOpenCalendar}}">' + - '<div class="md-datepicker-expand-triangle"></div>' + - '</md-button>'; - - tElement.addClass(HAS_TRIANGLE_ICON_CLASS); - } - - return calendarButton + - '<div class="md-datepicker-input-container" ng-class="{\'md-datepicker-focused\': ctrl.isFocused}">' + - '<input ' + - (ariaLabelValue ? 'aria-label="' + ariaLabelValue + '" ' : '') + - 'class="md-datepicker-input" ' + - 'aria-haspopup="true" ' + - 'aria-expanded="{{ctrl.isCalendarOpen}}" ' + - 'ng-focus="ctrl.setFocused(true)" ' + - 'ng-blur="ctrl.setFocused(false)"> ' + - triangleButton + - '</div>' + - - // This pane will be detached from here and re-attached to the document body. - '<div class="md-datepicker-calendar-pane md-whiteframe-z1" id="{{::ctrl.calendarPaneId}}">' + - '<div class="md-datepicker-input-mask">' + - '<div class="md-datepicker-input-mask-opaque"></div>' + - '</div>' + - '<div class="md-datepicker-calendar">' + - '<md-calendar role="dialog" aria-label="{{::ctrl.locale.msgCalendar}}" ' + - 'md-current-view="{{::ctrl.currentView}}"' + - 'md-min-date="ctrl.minDate"' + - 'md-max-date="ctrl.maxDate"' + - 'md-date-filter="ctrl.dateFilter"' + - 'ng-model="ctrl.date" ng-if="ctrl.isCalendarOpen">' + - '</md-calendar>' + - '</div>' + - '</div>'; - }, - require: ['ngModel', 'mdDatepicker', '?^mdInputContainer', '?^form'], - scope: { - minDate: '=mdMinDate', - maxDate: '=mdMaxDate', - placeholder: '@mdPlaceholder', - currentView: '@mdCurrentView', - dateFilter: '=mdDateFilter', - isOpen: '=?mdIsOpen', - debounceInterval: '=mdDebounceInterval', - dateLocale: '=mdDateLocale' - }, - controller: DatePickerCtrl, - controllerAs: 'ctrl', - bindToController: true, - link: function(scope, element, attr, controllers) { - var ngModelCtrl = controllers[0]; - var mdDatePickerCtrl = controllers[1]; - var mdInputContainer = controllers[2]; - var parentForm = controllers[3]; - var mdNoAsterisk = $mdUtil.parseAttributeBoolean(attr.mdNoAsterisk); - - mdDatePickerCtrl.configureNgModel(ngModelCtrl, mdInputContainer, inputDirective); - - if (mdInputContainer) { - // We need to move the spacer after the datepicker itself, - // because md-input-container adds it after the - // md-datepicker-input by default. The spacer gets wrapped in a - // div, because it floats and gets aligned next to the datepicker. - // There are easier ways of working around this with CSS (making the - // datepicker 100% wide, change the `display` etc.), however they - // break the alignment with any other form controls. - var spacer = element[0].querySelector('.md-errors-spacer'); - - if (spacer) { - element.after(angular.element('<div>').append(spacer)); - } - - mdInputContainer.setHasPlaceholder(attr.mdPlaceholder); - mdInputContainer.input = element; - mdInputContainer.element - .addClass(INPUT_CONTAINER_CLASS) - .toggleClass(HAS_CALENDAR_ICON_CLASS, attr.mdHideIcons !== 'calendar' && attr.mdHideIcons !== 'all'); - - if (!mdInputContainer.label) { - $mdAria.expect(element, 'aria-label', attr.mdPlaceholder); - } else if(!mdNoAsterisk) { - attr.$observe('required', function(value) { - mdInputContainer.label.toggleClass('md-required', !!value); - }); - } - - scope.$watch(mdInputContainer.isErrorGetter || function() { - return ngModelCtrl.$invalid && (ngModelCtrl.$touched || (parentForm && parentForm.$submitted)); - }, mdInputContainer.setInvalid); - } else if (parentForm) { - // If invalid, highlights the input when the parent form is submitted. - var parentSubmittedWatcher = scope.$watch(function() { - return parentForm.$submitted; - }, function(isSubmitted) { - if (isSubmitted) { - mdDatePickerCtrl.updateErrorState(); - parentSubmittedWatcher(); - } - }); - } - } - }; - } - - /** Additional offset for the input's `size` attribute, which is updated based on its content. */ - var EXTRA_INPUT_SIZE = 3; - - /** Class applied to the container if the date is invalid. */ - var INVALID_CLASS = 'md-datepicker-invalid'; - - /** Class applied to the datepicker when it's open. */ - var OPEN_CLASS = 'md-datepicker-open'; - - /** Class applied to the md-input-container, if a datepicker is placed inside it */ - var INPUT_CONTAINER_CLASS = '_md-datepicker-floating-label'; - - /** Class to be applied when the calendar icon is enabled. */ - var HAS_CALENDAR_ICON_CLASS = '_md-datepicker-has-calendar-icon'; - - /** Class to be applied when the triangle icon is enabled. */ - var HAS_TRIANGLE_ICON_CLASS = '_md-datepicker-has-triangle-icon'; - - /** Default time in ms to debounce input event by. */ - var DEFAULT_DEBOUNCE_INTERVAL = 500; - - /** - * Height of the calendar pane used to check if the pane is going outside the boundary of - * the viewport. See calendar.scss for how $md-calendar-height is computed; an extra 20px is - * also added to space the pane away from the exact edge of the screen. - * - * This is computed statically now, but can be changed to be measured if the circumstances - * of calendar sizing are changed. - */ - var CALENDAR_PANE_HEIGHT = 368; - - /** - * Width of the calendar pane used to check if the pane is going outside the boundary of - * the viewport. See calendar.scss for how $md-calendar-width is computed; an extra 20px is - * also added to space the pane away from the exact edge of the screen. - * - * This is computed statically now, but can be changed to be measured if the circumstances - * of calendar sizing are changed. - */ - var CALENDAR_PANE_WIDTH = 360; - - /** Used for checking whether the current user agent is on iOS or Android. */ - var IS_MOBILE_REGEX = /ipad|iphone|ipod|android/i; - - /** - * Controller for md-datepicker. - * - * ngInject @constructor - */ - function DatePickerCtrl($scope, $element, $attrs, $window, $mdConstant, - $mdTheming, $mdUtil, $mdDateLocale, $$mdDateUtil, $$rAF, $filter) { - - /** @final */ - this.$window = $window; - - /** @final */ - this.dateUtil = $$mdDateUtil; - - /** @final */ - this.$mdConstant = $mdConstant; - - /* @final */ - this.$mdUtil = $mdUtil; - - /** @final */ - this.$$rAF = $$rAF; - - /** @final */ - this.$mdDateLocale = $mdDateLocale; - - /** - * The root document element. This is used for attaching a top-level click handler to - * close the calendar panel when a click outside said panel occurs. We use `documentElement` - * instead of body because, when scrolling is disabled, some browsers consider the body element - * to be completely off the screen and propagate events directly to the html element. - * @type {!angular.JQLite} - */ - this.documentElement = angular.element(document.documentElement); - - /** @type {!angular.NgModelController} */ - this.ngModelCtrl = null; - - /** @type {HTMLInputElement} */ - this.inputElement = $element[0].querySelector('input'); - - /** @final {!angular.JQLite} */ - this.ngInputElement = angular.element(this.inputElement); - - /** @type {HTMLElement} */ - this.inputContainer = $element[0].querySelector('.md-datepicker-input-container'); - - /** @type {HTMLElement} Floating calendar pane. */ - this.calendarPane = $element[0].querySelector('.md-datepicker-calendar-pane'); - - /** @type {HTMLElement} Calendar icon button. */ - this.calendarButton = $element[0].querySelector('.md-datepicker-button'); - - /** - * Element covering everything but the input in the top of the floating calendar pane. - * @type {!angular.JQLite} - */ - this.inputMask = angular.element($element[0].querySelector('.md-datepicker-input-mask-opaque')); - - /** @final {!angular.JQLite} */ - this.$element = $element; - - /** @final {!angular.Attributes} */ - this.$attrs = $attrs; - - /** @final {!angular.Scope} */ - this.$scope = $scope; - - /** @type {Date} */ - this.date = null; - - /** @type {boolean} */ - this.isFocused = false; - - /** @type {boolean} */ - this.isDisabled; - this.setDisabled($element[0].disabled || angular.isString($attrs.disabled)); - - /** @type {boolean} Whether the date-picker's calendar pane is open. */ - this.isCalendarOpen = false; - - /** @type {boolean} Whether the calendar should open when the input is focused. */ - this.openOnFocus = $attrs.hasOwnProperty('mdOpenOnFocus'); - - /** @final */ - this.mdInputContainer = null; - - /** - * Element from which the calendar pane was opened. Keep track of this so that we can return - * focus to it when the pane is closed. - * @type {HTMLElement} - */ - this.calendarPaneOpenedFrom = null; - - /** @type {String} Unique id for the calendar pane. */ - this.calendarPaneId = 'md-date-pane-' + $mdUtil.nextUid(); - - /** Pre-bound click handler is saved so that the event listener can be removed. */ - this.bodyClickHandler = angular.bind(this, this.handleBodyClick); - - /** - * Name of the event that will trigger a close. Necessary to sniff the browser, because - * the resize event doesn't make sense on mobile and can have a negative impact since it - * triggers whenever the browser zooms in on a focused input. - */ - this.windowEventName = IS_MOBILE_REGEX.test( - navigator.userAgent || navigator.vendor || window.opera - ) ? 'orientationchange' : 'resize'; - - /** Pre-bound close handler so that the event listener can be removed. */ - this.windowEventHandler = $mdUtil.debounce(angular.bind(this, this.closeCalendarPane), 100); - - /** Pre-bound handler for the window blur event. Allows for it to be removed later. */ - this.windowBlurHandler = angular.bind(this, this.handleWindowBlur); - - /** The built-in Angular date filter. */ - this.ngDateFilter = $filter('date'); - - /** @type {Number} Extra margin for the left side of the floating calendar pane. */ - this.leftMargin = 20; - - /** @type {Number} Extra margin for the top of the floating calendar. Gets determined on the first open. */ - this.topMargin = null; - - // Unless the user specifies so, the datepicker should not be a tab stop. - // This is necessary because ngAria might add a tabindex to anything with an ng-model - // (based on whether or not the user has turned that particular feature on/off). - if ($attrs.tabindex) { - this.ngInputElement.attr('tabindex', $attrs.tabindex); - $attrs.$set('tabindex', null); - } else { - $attrs.$set('tabindex', '-1'); - } - - $attrs.$set('aria-owns', this.calendarPaneId); - - $mdTheming($element); - $mdTheming(angular.element(this.calendarPane)); - - var self = this; - - $scope.$on('$destroy', function() { - self.detachCalendarPane(); - }); - - if ($attrs.mdIsOpen) { - $scope.$watch('ctrl.isOpen', function(shouldBeOpen) { - if (shouldBeOpen) { - self.openCalendarPane({ - target: self.inputElement - }); - } else { - self.closeCalendarPane(); - } - }); - } - - // For Angular 1.4 and older, where there are no lifecycle hooks but bindings are pre-assigned, - // manually call the $onInit hook. - if (angular.version.major === 1 && angular.version.minor <= 4) { - this.$onInit(); - } - - } - - /** - * Angular Lifecycle hook for newer Angular versions. - * Bindings are not guaranteed to have been assigned in the controller, but they are in the $onInit hook. - */ - DatePickerCtrl.prototype.$onInit = function() { - - /** - * Holds locale-specific formatters, parsers, labels etc. Allows - * the user to override specific ones from the $mdDateLocale provider. - * @type {!Object} - */ - this.locale = this.dateLocale ? angular.extend({}, this.$mdDateLocale, this.dateLocale) : this.$mdDateLocale; - - this.installPropertyInterceptors(); - this.attachChangeListeners(); - this.attachInteractionListeners(); - }; - - /** - * Sets up the controller's reference to ngModelController and - * applies Angular's `input[type="date"]` directive. - * @param {!angular.NgModelController} ngModelCtrl Instance of the ngModel controller. - * @param {Object} mdInputContainer Instance of the mdInputContainer controller. - * @param {Object} inputDirective Config for Angular's `input` directive. - */ - DatePickerCtrl.prototype.configureNgModel = function(ngModelCtrl, mdInputContainer, inputDirective) { - this.ngModelCtrl = ngModelCtrl; - this.mdInputContainer = mdInputContainer; - - // The input needs to be [type="date"] in order to be picked up by Angular. - this.$attrs.$set('type', 'date'); - - // Invoke the `input` directive link function, adding a stub for the element. - // This allows us to re-use Angular's logic for setting the timezone via ng-model-options. - // It works by calling the link function directly which then adds the proper `$parsers` and - // `$formatters` to the ngModel controller. - inputDirective[0].link.pre(this.$scope, { - on: angular.noop, - val: angular.noop, - 0: {} - }, this.$attrs, [ngModelCtrl]); - - var self = this; - - // Responds to external changes to the model value. - self.ngModelCtrl.$formatters.push(function(value) { - if (value && !(value instanceof Date)) { - throw Error('The ng-model for md-datepicker must be a Date instance. ' + - 'Currently the model is a: ' + (typeof value)); - } - - self.onExternalChange(value); - - return value; - }); - - // Responds to external error state changes (e.g. ng-required based on another input). - ngModelCtrl.$viewChangeListeners.unshift(angular.bind(this, this.updateErrorState)); - - // Forwards any events from the input to the root element. This is necessary to get `updateOn` - // working for events that don't bubble (e.g. 'blur') since Angular binds the handlers to - // the `<md-datepicker>`. - var updateOn = self.$mdUtil.getModelOption(ngModelCtrl, 'updateOn'); - - if (updateOn) { - this.ngInputElement.on( - updateOn, - angular.bind(this.$element, this.$element.triggerHandler, updateOn) - ); - } - }; - - /** - * Attach event listeners for both the text input and the md-calendar. - * Events are used instead of ng-model so that updates don't infinitely update the other - * on a change. This should also be more performant than using a $watch. - */ - DatePickerCtrl.prototype.attachChangeListeners = function() { - var self = this; - - self.$scope.$on('md-calendar-change', function(event, date) { - self.setModelValue(date); - self.onExternalChange(date); - self.closeCalendarPane(); - }); - - self.ngInputElement.on('input', angular.bind(self, self.resizeInputElement)); - - var debounceInterval = angular.isDefined(this.debounceInterval) ? - this.debounceInterval : DEFAULT_DEBOUNCE_INTERVAL; - self.ngInputElement.on('input', self.$mdUtil.debounce(self.handleInputEvent, - debounceInterval, self)); - }; - - /** Attach event listeners for user interaction. */ - DatePickerCtrl.prototype.attachInteractionListeners = function() { - var self = this; - var $scope = this.$scope; - var keyCodes = this.$mdConstant.KEY_CODE; - - // Add event listener through angular so that we can triggerHandler in unit tests. - self.ngInputElement.on('keydown', function(event) { - if (event.altKey && event.keyCode == keyCodes.DOWN_ARROW) { - self.openCalendarPane(event); - $scope.$digest(); - } - }); - - if (self.openOnFocus) { - self.ngInputElement.on('focus', angular.bind(self, self.openCalendarPane)); - angular.element(self.$window).on('blur', self.windowBlurHandler); - - $scope.$on('$destroy', function() { - angular.element(self.$window).off('blur', self.windowBlurHandler); - }); - } - - $scope.$on('md-calendar-close', function() { - self.closeCalendarPane(); - }); - }; - - /** - * Capture properties set to the date-picker and imperitively handle internal changes. - * This is done to avoid setting up additional $watches. - */ - DatePickerCtrl.prototype.installPropertyInterceptors = function() { - var self = this; - - if (this.$attrs.ngDisabled) { - // The expression is to be evaluated against the directive element's scope and not - // the directive's isolate scope. - var scope = this.$scope.$parent; - - if (scope) { - scope.$watch(this.$attrs.ngDisabled, function(isDisabled) { - self.setDisabled(isDisabled); - }); - } - } - - Object.defineProperty(this, 'placeholder', { - get: function() { return self.inputElement.placeholder; }, - set: function(value) { self.inputElement.placeholder = value || ''; } - }); - }; - - /** - * Sets whether the date-picker is disabled. - * @param {boolean} isDisabled - */ - DatePickerCtrl.prototype.setDisabled = function(isDisabled) { - this.isDisabled = isDisabled; - this.inputElement.disabled = isDisabled; - - if (this.calendarButton) { - this.calendarButton.disabled = isDisabled; - } - }; - - /** - * Sets the custom ngModel.$error flags to be consumed by ngMessages. Flags are: - * - mindate: whether the selected date is before the minimum date. - * - maxdate: whether the selected flag is after the maximum date. - * - filtered: whether the selected date is allowed by the custom filtering function. - * - valid: whether the entered text input is a valid date - * - * The 'required' flag is handled automatically by ngModel. - * - * @param {Date=} opt_date Date to check. If not given, defaults to the datepicker's model value. - */ - DatePickerCtrl.prototype.updateErrorState = function(opt_date) { - var date = opt_date || this.date; - - // Clear any existing errors to get rid of anything that's no longer relevant. - this.clearErrorState(); - - if (this.dateUtil.isValidDate(date)) { - // Force all dates to midnight in order to ignore the time portion. - date = this.dateUtil.createDateAtMidnight(date); - - if (this.dateUtil.isValidDate(this.minDate)) { - var minDate = this.dateUtil.createDateAtMidnight(this.minDate); - this.ngModelCtrl.$setValidity('mindate', date >= minDate); - } - - if (this.dateUtil.isValidDate(this.maxDate)) { - var maxDate = this.dateUtil.createDateAtMidnight(this.maxDate); - this.ngModelCtrl.$setValidity('maxdate', date <= maxDate); - } - - if (angular.isFunction(this.dateFilter)) { - this.ngModelCtrl.$setValidity('filtered', this.dateFilter(date)); - } - } else { - // The date is seen as "not a valid date" if there is *something* set - // (i.e.., not null or undefined), but that something isn't a valid date. - this.ngModelCtrl.$setValidity('valid', date == null); - } - - angular.element(this.inputContainer).toggleClass(INVALID_CLASS, !this.ngModelCtrl.$valid); - }; - - /** Clears any error flags set by `updateErrorState`. */ - DatePickerCtrl.prototype.clearErrorState = function() { - this.inputContainer.classList.remove(INVALID_CLASS); - ['mindate', 'maxdate', 'filtered', 'valid'].forEach(function(field) { - this.ngModelCtrl.$setValidity(field, true); - }, this); - }; - - /** Resizes the input element based on the size of its content. */ - DatePickerCtrl.prototype.resizeInputElement = function() { - this.inputElement.size = this.inputElement.value.length + EXTRA_INPUT_SIZE; - }; - - /** - * Sets the model value if the user input is a valid date. - * Adds an invalid class to the input element if not. - */ - DatePickerCtrl.prototype.handleInputEvent = function() { - var inputString = this.inputElement.value; - var parsedDate = inputString ? this.locale.parseDate(inputString) : null; - this.dateUtil.setDateTimeToMidnight(parsedDate); - - // An input string is valid if it is either empty (representing no date) - // or if it parses to a valid date that the user is allowed to select. - var isValidInput = inputString == '' || ( - this.dateUtil.isValidDate(parsedDate) && - this.locale.isDateComplete(inputString) && - this.isDateEnabled(parsedDate) - ); - - // The datepicker's model is only updated when there is a valid input. - if (isValidInput) { - this.setModelValue(parsedDate); - this.date = parsedDate; - } - - this.updateErrorState(parsedDate); - }; - - /** - * Check whether date is in range and enabled - * @param {Date=} opt_date - * @return {boolean} Whether the date is enabled. - */ - DatePickerCtrl.prototype.isDateEnabled = function(opt_date) { - return this.dateUtil.isDateWithinRange(opt_date, this.minDate, this.maxDate) && - (!angular.isFunction(this.dateFilter) || this.dateFilter(opt_date)); - }; - - /** Position and attach the floating calendar to the document. */ - DatePickerCtrl.prototype.attachCalendarPane = function() { - var calendarPane = this.calendarPane; - var body = document.body; - - calendarPane.style.transform = ''; - this.$element.addClass(OPEN_CLASS); - this.mdInputContainer && this.mdInputContainer.element.addClass(OPEN_CLASS); - angular.element(body).addClass('md-datepicker-is-showing'); - - var elementRect = this.inputContainer.getBoundingClientRect(); - var bodyRect = body.getBoundingClientRect(); - - if (!this.topMargin || this.topMargin < 0) { - this.topMargin = (this.inputMask.parent().prop('clientHeight') - this.ngInputElement.prop('clientHeight')) / 2; - } - - // Check to see if the calendar pane would go off the screen. If so, adjust position - // accordingly to keep it within the viewport. - var paneTop = elementRect.top - bodyRect.top - this.topMargin; - var paneLeft = elementRect.left - bodyRect.left - this.leftMargin; - - // If ng-material has disabled body scrolling (for example, if a dialog is open), - // then it's possible that the already-scrolled body has a negative top/left. In this case, - // we want to treat the "real" top as (0 - bodyRect.top). In a normal scrolling situation, - // though, the top of the viewport should just be the body's scroll position. - var viewportTop = (bodyRect.top < 0 && document.body.scrollTop == 0) ? - -bodyRect.top : - document.body.scrollTop; - - var viewportLeft = (bodyRect.left < 0 && document.body.scrollLeft == 0) ? - -bodyRect.left : - document.body.scrollLeft; - - var viewportBottom = viewportTop + this.$window.innerHeight; - var viewportRight = viewportLeft + this.$window.innerWidth; - - // Creates an overlay with a hole the same size as element. We remove a pixel or two - // on each end to make it overlap slightly. The overlay's background is added in - // the theme in the form of a box-shadow with a huge spread. - this.inputMask.css({ - position: 'absolute', - left: this.leftMargin + 'px', - top: this.topMargin + 'px', - width: (elementRect.width - 1) + 'px', - height: (elementRect.height - 2) + 'px' - }); - - // If the right edge of the pane would be off the screen and shifting it left by the - // difference would not go past the left edge of the screen. If the calendar pane is too - // big to fit on the screen at all, move it to the left of the screen and scale the entire - // element down to fit. - if (paneLeft + CALENDAR_PANE_WIDTH > viewportRight) { - if (viewportRight - CALENDAR_PANE_WIDTH > 0) { - paneLeft = viewportRight - CALENDAR_PANE_WIDTH; - } else { - paneLeft = viewportLeft; - var scale = this.$window.innerWidth / CALENDAR_PANE_WIDTH; - calendarPane.style.transform = 'scale(' + scale + ')'; - } - - calendarPane.classList.add('md-datepicker-pos-adjusted'); - } - - // If the bottom edge of the pane would be off the screen and shifting it up by the - // difference would not go past the top edge of the screen. - if (paneTop + CALENDAR_PANE_HEIGHT > viewportBottom && - viewportBottom - CALENDAR_PANE_HEIGHT > viewportTop) { - paneTop = viewportBottom - CALENDAR_PANE_HEIGHT; - calendarPane.classList.add('md-datepicker-pos-adjusted'); - } - - calendarPane.style.left = paneLeft + 'px'; - calendarPane.style.top = paneTop + 'px'; - document.body.appendChild(calendarPane); - - // Add CSS class after one frame to trigger open animation. - this.$$rAF(function() { - calendarPane.classList.add('md-pane-open'); - }); - }; - - /** Detach the floating calendar pane from the document. */ - DatePickerCtrl.prototype.detachCalendarPane = function() { - this.$element.removeClass(OPEN_CLASS); - this.mdInputContainer && this.mdInputContainer.element.removeClass(OPEN_CLASS); - angular.element(document.body).removeClass('md-datepicker-is-showing'); - this.calendarPane.classList.remove('md-pane-open'); - this.calendarPane.classList.remove('md-datepicker-pos-adjusted'); - - if (this.isCalendarOpen) { - this.$mdUtil.enableScrolling(); - } - - if (this.calendarPane.parentNode) { - // Use native DOM removal because we do not want any of the - // angular state of this element to be disposed. - this.calendarPane.parentNode.removeChild(this.calendarPane); - } - }; - - /** - * Open the floating calendar pane. - * @param {Event} event - */ - DatePickerCtrl.prototype.openCalendarPane = function(event) { - if (!this.isCalendarOpen && !this.isDisabled && !this.inputFocusedOnWindowBlur) { - this.isCalendarOpen = this.isOpen = true; - this.calendarPaneOpenedFrom = event.target; - - // Because the calendar pane is attached directly to the body, it is possible that the - // rest of the component (input, etc) is in a different scrolling container, such as - // an md-content. This means that, if the container is scrolled, the pane would remain - // stationary. To remedy this, we disable scrolling while the calendar pane is open, which - // also matches the native behavior for things like `<select>` on Mac and Windows. - this.$mdUtil.disableScrollAround(this.calendarPane); - - this.attachCalendarPane(); - this.focusCalendar(); - this.evalAttr('ngFocus'); - - // Attach click listener inside of a timeout because, if this open call was triggered by a - // click, we don't want it to be immediately propogated up to the body and handled. - var self = this; - this.$mdUtil.nextTick(function() { - // Use 'touchstart` in addition to click in order to work on iOS Safari, where click - // events aren't propogated under most circumstances. - // See http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html - self.documentElement.on('click touchstart', self.bodyClickHandler); - }, false); - - window.addEventListener(this.windowEventName, this.windowEventHandler); - } - }; - - /** Close the floating calendar pane. */ - DatePickerCtrl.prototype.closeCalendarPane = function() { - if (this.isCalendarOpen) { - var self = this; - - self.detachCalendarPane(); - self.ngModelCtrl.$setTouched(); - self.evalAttr('ngBlur'); - - self.documentElement.off('click touchstart', self.bodyClickHandler); - window.removeEventListener(self.windowEventName, self.windowEventHandler); - - self.calendarPaneOpenedFrom.focus(); - self.calendarPaneOpenedFrom = null; - - if (self.openOnFocus) { - // Ensures that all focus events have fired before resetting - // the calendar. Prevents the calendar from reopening immediately - // in IE when md-open-on-focus is set. Also it needs to trigger - // a digest, in order to prevent issues where the calendar wasn't - // showing up on the next open. - self.$mdUtil.nextTick(reset); - } else { - reset(); - } - } - - function reset(){ - self.isCalendarOpen = self.isOpen = false; - } - }; - - /** Gets the controller instance for the calendar in the floating pane. */ - DatePickerCtrl.prototype.getCalendarCtrl = function() { - return angular.element(this.calendarPane.querySelector('md-calendar')).controller('mdCalendar'); - }; - - /** Focus the calendar in the floating pane. */ - DatePickerCtrl.prototype.focusCalendar = function() { - // Use a timeout in order to allow the calendar to be rendered, as it is gated behind an ng-if. - var self = this; - this.$mdUtil.nextTick(function() { - self.getCalendarCtrl().focus(); - }, false); - }; - - /** - * Sets whether the input is currently focused. - * @param {boolean} isFocused - */ - DatePickerCtrl.prototype.setFocused = function(isFocused) { - if (!isFocused) { - this.ngModelCtrl.$setTouched(); - } - - // The ng* expressions shouldn't be evaluated when mdOpenOnFocus is on, - // because they also get called when the calendar is opened/closed. - if (!this.openOnFocus) { - this.evalAttr(isFocused ? 'ngFocus' : 'ngBlur'); - } - - this.isFocused = isFocused; - }; - - /** - * Handles a click on the document body when the floating calendar pane is open. - * Closes the floating calendar pane if the click is not inside of it. - * @param {MouseEvent} event - */ - DatePickerCtrl.prototype.handleBodyClick = function(event) { - if (this.isCalendarOpen) { - var isInCalendar = this.$mdUtil.getClosest(event.target, 'md-calendar'); - - if (!isInCalendar) { - this.closeCalendarPane(); - } - - this.$scope.$digest(); - } - }; - - /** - * Handles the event when the user navigates away from the current tab. Keeps track of - * whether the input was focused when the event happened, in order to prevent the calendar - * from re-opening. - */ - DatePickerCtrl.prototype.handleWindowBlur = function() { - this.inputFocusedOnWindowBlur = document.activeElement === this.inputElement; - }; - - /** - * Evaluates an attribute expression against the parent scope. - * @param {String} attr Name of the attribute to be evaluated. - */ - DatePickerCtrl.prototype.evalAttr = function(attr) { - if (this.$attrs[attr]) { - this.$scope.$parent.$eval(this.$attrs[attr]); - } - }; - - /** - * Sets the ng-model value by first converting the date object into a strng. Converting it - * is necessary, in order to pass Angular's `input[type="date"]` validations. Angular turns - * the value into a Date object afterwards, before setting it on the model. - * @param {Date=} value Date to be set as the model value. - */ - DatePickerCtrl.prototype.setModelValue = function(value) { - var timezone = this.$mdUtil.getModelOption(this.ngModelCtrl, 'timezone'); - this.ngModelCtrl.$setViewValue(this.ngDateFilter(value, 'yyyy-MM-dd', timezone)); - }; - - /** - * Updates the datepicker when a model change occurred externally. - * @param {Date=} value Value that was set to the model. - */ - DatePickerCtrl.prototype.onExternalChange = function(value) { - var timezone = this.$mdUtil.getModelOption(this.ngModelCtrl, 'timezone'); - - this.date = value; - this.inputElement.value = this.locale.formatDate(value, timezone); - this.mdInputContainer && this.mdInputContainer.setHasValue(!!value); - this.resizeInputElement(); - this.updateErrorState(); - }; -})(); - -ngmaterial.components.datepicker = angular.module("material.components.datepicker");
\ No newline at end of file |