You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3049 lines
109 KiB
3049 lines
109 KiB
/*!
|
|
* 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");
|