Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

feat(datepicker): allow users to specify the default calendar view #9113

Closed
wants to merge 1 commit into from
Closed

feat(datepicker): allow users to specify the default calendar view #9113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions src/components/datepicker/js/calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,8 @@
scope: {
minDate: '=mdMinDate',
maxDate: '=mdMaxDate',
dateFilter: '=mdDateFilter'
dateFilter: '=mdDateFilter',
_currentView: '@mdCurrentView'
Copy link
Member

@devversion devversion Jul 22, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you not make this optional and do in the controller?

this.currentView = this.currentView || 'month';

This would drop the unnecessary variable

I read the comment below, but I can't really see the point here.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried it out, but for some reason the datepicker kept resetting it after the calendar was opened. E.g. here's what I tried:

var self = this;

console.log(self.currentView); // logs properly

setTimeout(function() {
  console.log(self.currentView); // logs an empty string 
});

It's weird, because it doesn't happen if I switch it to a two-way binding or I also add this.currentView = this.currentView || 'month'; to the datepicker's controller. I went with the underscored property in order to keep all the currentView logic within the calendar.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I can't really understand why this is resetted. Isn't the currentView method only called after some interactions?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't understand it either, the only time something interacts with it is when passing it through the template. My initial guess was because the calendar pane gets transferred from being a child of the datepicker to being directly in the body, but it still happened even after disabling it.

Copy link
Member

@devversion devversion Jul 22, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pretty weird. Not sure if you want to invest some more time, but you could possibly try to hook into that variable and try to figure out where it was changed from.

But other than that, the changes look fine :)

},
require: ['ngModel', 'mdCalendar'],
controller: CalendarCtrl,
Expand Down Expand Up @@ -116,8 +117,13 @@
/** @type {!angular.NgModelController} */
this.ngModelCtrl = null;

/** @type {String} The currently visible calendar view. */
this.currentView = 'month';
/**
* 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';

/** @type {String} Class applied to the selected date cell. */
this.SELECTED_DATE_CLASS = 'md-calendar-selected-date';
Expand Down
12 changes: 10 additions & 2 deletions src/components/datepicker/js/calendar.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,9 @@ describe('md-calendar', function() {
}

/** Creates and compiles an md-calendar element. */
function createElement(parentScope) {
function createElement(parentScope, templateOverride) {
var directiveScope = parentScope || $rootScope.$new();
var template = '<md-calendar md-min-date="minDate" md-max-date="maxDate" ' +
var template = templateOverride || '<md-calendar md-min-date="minDate" md-max-date="maxDate" ' +
'ng-model="myDate"></md-calendar>';
var attachedElement = angular.element(template);
document.body.appendChild(attachedElement[0]);
Expand Down Expand Up @@ -707,4 +707,12 @@ describe('md-calendar', function() {
}
}
});

it('should have a configurable default view', function() {
ngElement.remove();
var calendar = createElement(null, '<md-calendar ng-model="myDate" md-current-view="year"></md-calendar>')[0];

expect(calendar.querySelector('md-calendar-month')).toBeFalsy();
expect(calendar.querySelector('md-calendar-year')).toBeTruthy();
});
});
15 changes: 7 additions & 8 deletions src/components/datepicker/js/datepickerDirective.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
* @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.
Expand Down Expand Up @@ -93,7 +94,9 @@
'</div>' +
'<div class="md-datepicker-calendar">' +
'<md-calendar role="dialog" aria-label="{{::ctrl.dateLocale.msgCalendar}}" ' +
'md-min-date="ctrl.minDate" md-max-date="ctrl.maxDate"' +
'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>' +
Expand All @@ -105,6 +108,7 @@
minDate: '=mdMinDate',
maxDate: '=mdMaxDate',
placeholder: '@mdPlaceholder',
currentView: '@mdCurrentView',
dateFilter: '=mdDateFilter',
isOpen: '=?mdIsOpen',
debounceInterval: '=mdDebounceInterval'
Expand Down Expand Up @@ -205,13 +209,8 @@
*
* @ngInject @constructor
*/
function DatePickerCtrl($scope, $element, $attrs, $compile, $timeout, $window,
$mdConstant, $mdTheming, $mdUtil, $mdDateLocale, $$mdDateUtil, $$rAF) {
/** @final */
this.$compile = $compile;

/** @final */
this.$timeout = $timeout;
function DatePickerCtrl($scope, $element, $attrs, $window, $mdConstant,
$mdTheming, $mdUtil, $mdDateLocale, $$mdDateUtil, $$rAF) {

/** @final */
this.$window = $window;
Expand Down